css - Bootstrap carousel has white space between each images -

here test site http://mint.sbdigi.com/, notice carousel has white space in between when transitioning. not sure why happening. please.

here short code have:

html

  <!-- wrapper slides -->   <div class="carousel-inner">     <div class="item text-medium active" style="height: 100%;">       <h2>your fresh new family dentist</h2>       <div class="carousel-overlay"></div><!-- carousel-overlay -->       <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/mint_dental_sliderimg_02.jpg');" class="fill"></div>     </div>       <div class="item text-medium" style="height: 100%;">         <h2>bright smile package</h2>         <div class="carousel-overlay"></div><!-- carousel-overlay -->         <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/mint_dental_sliderimg_03.jpg');" class="fill"></div>       </div>       <div class="item text-medium" style="height: 100%;">         <h2>refresh package</h2>         <div class="carousel-overlay"></div><!-- carousel-overlay -->         <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/mint_dental_sliderimg_04.jpg');" class="fill"></div>       </div>       <div class="item text-medium" style="height: 100%;">         <h2>new patient combo</h2>         <div class="carousel-overlay"></div><!-- carousel-overlay -->         <div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/mint_dental_sliderimg_05.jpg');" class="fill"></div>       </div> </div></header> 

css

header.carousel {     height: 550px; }  #mint-landingcarousel .carousel-indicators {     z-index: 2; }  .carousel-indicators {     bottom: 20px; }  .carousel-inner {     overflow: hidden;     position: relative;     width: 100%; }  header.carousel {     height: 550px; } header.carousel .item {     height: 100%; } header.carousel .item.active {     height: 100%; } header.carousel .item h2 {     font-size: 90px;     left: 25%;     position: absolute;     text-align: center;     top: 35%;     width: 50%;     z-index: 9999999; } header.carousel .carousel-inner {     height: 100%; } header.carousel .fill {     background-position: center center;     background-size: cover;     height: 100%;     position: relative;     width: 100%;     z-index: -9999; } .carousel-overlay {     background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;     height: 100%;     position: absolute;     width: 100%;     z-index: 9999; } 

i not sure if code enough. let me know though if still want of code. of these codes default in twitter bootstrap css.

at first seems that:

an .active class being added on active image in carousel. .active class defines height visible/active item in carousel.

when .active not present height not set image not visible.

you should change behavior of script, keeping height visibility of hidden images otherwise white color page background.

i hope helps.