title: Bootstrap Carousel Image Not Display in Full Width
body: <p>I'm creating <a href="http://zulhfreelancer.com/projects/omar/" rel="noreferrer">a simple HTML template</a> using Bootstrap 3. I check the template in medium size display, it looks ok. But when I check it in larger display (and higher resolution), I see some white space at the right side of the images inside the Carousel.</p>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/SlBO6.jpg" alt="enter image description here"></p>
  
  <p>My code for the Carousel:</p>
  
  <pre><code>&lt;!-- Carousel
  ================================================== --&gt;
  
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;
          &lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;
          &lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
            &lt;img src="img/4.jpg"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;
                  Example headline.
                &lt;/h1&gt;
                &lt;p&gt;
                  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                &lt;/p&gt;
                &lt;p&gt;
                  &lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;
                    Call to Action
                  &lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="img/5.jpg"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;
                  Another example headline.
                &lt;/h1&gt;
                &lt;p&gt;
                  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                &lt;/p&gt;
                &lt;p&gt;
                  &lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;
                    Register Now
                  &lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img src="img/6.jpg"&gt;
            &lt;div class="container"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h1&gt;
                  One more for good measure.
                &lt;/h1&gt;
                &lt;p&gt;
                  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                &lt;/p&gt;
                &lt;p&gt;
                  &lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;
                    Read Blog
                  &lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&gt;
          &lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;
          &lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- end #mycarousel --&gt;
  </code></pre>
  
  <p>How to fix this problem? </p>
  
  <p>I have try to insert container class before the Carousel class, but that not give me full width Carousel. I want the Carousel in full width, not wrapped in container class width.</p>