title: Carousel image doesn't fill the width in bootstrap 3
body: <p>I'm soooooo new at this responsive stuff. I'm trying to use the carousel from the new bootstrap 3 and for some reason, the image does not fill the width of the carousel. All the images are the same exact size (1000x395) and no matter what i do, it doesn't fill all the way. Any and all help is greatly appreciated!!! Here's the code i'm using and a screenshot:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
  
        &lt;div id="carousel" class="carousel slide"&gt;
          &lt;ol class="carousel-indicators"&gt;
            &lt;li data-target="#carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="1"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="3"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="4"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="5"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="6"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="7"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="8"&gt;&lt;/li&gt;
            &lt;li data-target="#carousel" data-slide-to="9"&gt;&lt;/li&gt;
          &lt;/ol&gt;
  
          &lt;div class="carousel-inner"&gt;
  
            &lt;div class="item active"&gt;
              &lt;img src="/images/temp/1.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/2.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/3.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/4.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/5.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/6.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/7.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/8.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/9.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="/images/temp/10.jpg" class="img-responsive"&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;a class="left carousel-control" href="#carousel" data-slide="prev"&gt;
            &lt;span class="icon-prev"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#carousel" data-slide="next"&gt;
            &lt;span class="icon-next"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- /col-md-12 --&gt;
  &lt;/div&gt; &lt;!-- /row --&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/xVah9.png" alt="non full width image"></p>