Bootstrap carousel has white space between each images - css

Question

Here is my test site http://mint.sbdigi.com/, notice the carousel that it has a white space in between when transitioning. I am not sure why that is happening. Any help please.
Here is a short code that I have:
HTML
<!-- Wrapper for 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 am not sure if this code is enough. let me know though if you still want of my code. Some of these codes are default in the twitter bootstrap css.

Answer 1

At a first look it seems that:
an .active class is being added on the active image in your carousel.
.active class defines the height for a visible/active item in your carousel.
When .active is not present height is not set so image is not visible.
You should change the behavior of your script, keeping height for visibility of you hidden images otherwise you get the white color your page background.
I hope it helps.

Answer 2

I think you have custom CSS .left{float:left;} and .right{float:right;}
When the carousel slides it adds classes of left and right to the containing div. Remove the left and right floats in CSS.
OR
Add a inline property
<div class="item text-medium" style="height: 100%; float:none;">

Answer 3

It seems there is a "left" class being added to the "active" class through every iteration. I'm not sure if that is the solution but you could research that a bit.
Being that you are only using three images, if you want you could set the background of those images to the same exact image so that through each iteration (when they disappear), there is the same image still in the background. This is not efficient nor is it good for page speed/load, however, but it is a solution nonetheless.