title: Bootstrap Carousel Image Doesn't Align Center Horizontally
body: <p>This is my code :</p>
  
  <pre><code>&lt;style&gt;
    .carousel-inner &gt; .item &gt; img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      min-height: 510px;
      max-width: none;
    }
  &lt;/style&gt;
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
    &lt;div style="background-color: red;" class="slider col-lg-10"&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
          &lt;img class="first-slide img-responsive center-block" src="assets/img/underconstruction.jpg" alt="First slide"&gt;
          &lt;div class="container"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h1&gt;Example headline.&lt;/h1&gt;
              &lt;p&gt;Note: If you're viewing this page via a &lt;code&gt;file://&lt;/code&gt; URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="#" role="button"&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- carousel-caption --&gt;
          &lt;/div&gt;&lt;!-- container --&gt;
        &lt;/div&gt;&lt;!-- item active --&gt;
        &lt;div class="item"&gt;
          &lt;img class="second-slide" src="assets/img/underconstruction.jpg" alt="Second slide"&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;Learn more&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- carousel-caption --&gt;
          &lt;/div&gt;&lt;!-- container --&gt;
        &lt;/div&gt;&lt;!-- item --&gt;
        &lt;div class="item"&gt;
          &lt;img class="third-slide" src="assets/img/underconstruction.jpg" alt="Third slide"&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;Browse gallery&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- carousel-caption --&gt;
          &lt;/div&gt;&lt;!-- container --&gt;
        &lt;/div&gt;&lt;!-- item --&gt;
      &lt;/div&gt;&lt;!-- carousel-inner --&gt;
    &lt;/div&gt;&lt;!-- slider col-lg-10 --&gt;
  
    &lt;div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-vertical col-lg-2 visible-lg"&gt;TAB 1&lt;/div&gt;
    &lt;div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-vertical col-lg-2 visible-lg"&gt;TAB 2&lt;/div&gt;
    &lt;div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-vertical col-lg-2 visible-lg"&gt;TAB 3&lt;/div&gt;
  
    &lt;div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-horizontal col-xs-4 hidden-lg"&gt;TAB 1&lt;/div&gt;
    &lt;div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-horizontal col-xs-4 hidden-lg"&gt;TAB 2&lt;/div&gt;
    &lt;div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-horizontal col-xs-4 hidden-lg"&gt;TAB 3&lt;/div&gt;
  &lt;/div&gt;&lt;!-- carousel slide --&gt;
  </code></pre>
  
  <p>I managed to get this on wide screen :
  <img src="https://i.stack.imgur.com/W1GA7.png" alt="enter image description here"></p>
  
  <p>and this on narrow screen :
  <img src="https://i.stack.imgur.com/sX5rU.png" alt="enter image description here"></p>
  
  <p>if you take a look closely the image in the narrow screen is not aligned properly in center, it is placed on the left. I want to make it to center.</p>
  
  <p>And also I can't make the image to fill all the spaces there's still some red section which means it doesn't filled up.</p>
  
  <p>Please help, I spend hours of research and still come with nothing.</p>
  
  <p>I see some margin solution but it doesn't help.</p>
  
  <p>I've tried to set the width, it is centered but it doesn't fill top and bottom of the carousel. And also it become small in narrow screen.</p>