title: White space between slides bootstrap carousel
body: <p>I am using the bootstrap carousel for a slider on the home page of a website.</p>
  
  <p>When the carousel slides automatically there is no problem but as soon as I click the next and prev arrows a ±140px wide white space appears between the slides.</p>
  
  <p>I have inspected the css and removed all white space in the HTML but I'm having no luck at all.</p>
  
  <p>Carousel HTML:</p>
  
  <pre><code>&lt;div class="clearfix row slider"&gt;
  &lt;div class="clearfix carousel slide col-lg-12 col-md-12 col-sm-12 col-xs-12" data-ride="carousel" id="carousel-example-generic"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="clearfix item active" style='background: url("/Content/Images/media/carousel/hero-test.jpg") no-repeat;'&gt;
              &lt;div class="clearfix max-width carousel-caption"&gt;
                  &lt;h2&gt;Hello. I'm Lorem. I'm a Slow
                  Cooker.&lt;/h2&gt;&lt;span class="clearfix"&gt;And I'm quickly
                  changing the world&lt;/span&gt; 
                  &lt;a class='fresco cta' data-fresco-caption="Lorem | How It Works" data-fresco-group='example' href='https://vimeo.com/105705114'&gt;How It Works&lt;/a&gt;
              &lt;/div&gt;
              &lt;video autoplay="" class="bgvid" loop="" poster="/Content/Images/default/video-bg.jpg"&gt;
                  &lt;source src="/Content/Images/media/bkvideo/1_Lorem-marquee.mp4" type="video/webm"&gt;
                  &lt;source src="polina.html" type="video/mp4"&gt;
              &lt;/video&gt;
          &lt;/div&gt;
          &lt;div class="clearfix item" style='background: url("/Content/Images/media/carousel/1_marquee-2.jpg ") no-repeat;'&gt;
              &lt;div class="clearfix max-width carousel-caption"&gt;
                  &lt;h2&gt;Get to know Lorem.&lt;/h2&gt;&lt;span class="clearfix"&gt;And learn the Lorem Story&lt;/span&gt;
                  &lt;a class="cta" href="/Pages/SarahsStory"&gt;Meet Lorem&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"&gt;&lt;span&gt;&lt;img alt=" " src="/Content/Images/default/arrow-slider.svg"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;a class="right carousel-control" data-slide="next" href="#carousel-example-generic"&gt;&lt;span&gt;&lt;img alt=" " src="/Content/Images/default/arrow-slider.svg"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Link to website: <a href="http://bit.ly/1BcaEb8" rel="nofollow">http://bit.ly/1BcaEb8</a> - Click on South Africa and its the main carousel / slider</p>