title: Bootstrap carousel has white space between each images
body: <p>Here is my test site <a href="http://mint.sbdigi.com/" rel="nofollow">http://mint.sbdigi.com/</a>, notice the carousel that it has a white space in between when transitioning. I am not sure why that is happening. Any help please.</p>
  
  <p>Here is a short code that I have:</p>
  
  <p><strong>HTML</strong></p>
  
  <p>
        
        
          </li>
          </li>
          </li>
          </li>
        </p>
  
  <pre><code>  &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item text-medium active" style="height: 100%;"&gt;
        &lt;h2&gt;Your Fresh New Family Dentist&lt;/h2&gt;
        &lt;div class="carousel-overlay"&gt;&lt;/div&gt;&lt;!-- carousel-overlay --&gt;
        &lt;div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_02.jpg');" class="fill"&gt;&lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="item text-medium" style="height: 100%;"&gt;
          &lt;h2&gt;Bright Smile Package&lt;/h2&gt;
          &lt;div class="carousel-overlay"&gt;&lt;/div&gt;&lt;!-- carousel-overlay --&gt;
          &lt;div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_03.jpg');" class="fill"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item text-medium" style="height: 100%;"&gt;
          &lt;h2&gt;Refresh Package&lt;/h2&gt;
          &lt;div class="carousel-overlay"&gt;&lt;/div&gt;&lt;!-- carousel-overlay --&gt;
          &lt;div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_04.jpg');" class="fill"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item text-medium" style="height: 100%;"&gt;
          &lt;h2&gt;New Patient Combo&lt;/h2&gt;
          &lt;div class="carousel-overlay"&gt;&lt;/div&gt;&lt;!-- carousel-overlay --&gt;
          &lt;div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_05.jpg');" class="fill"&gt;&lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;&lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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.</p>