title: Bootstrap Carousel image doesn't align properly
body: <p>Please take a look at the following image, we are using bootstrap carousel to rotate the images.
  However, when the window width is large, the image doesn't align with the border properly.</p>
  
  <p>But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code. </p>
  
  <p>Can someone explain why carousel is behaving differently?
  Is this anything to do with Image size or some bootstrap config is missing?</p>
  
  <pre><code>&lt;section id="carousel"&gt;
  &lt;div class="hero-unit span6 columns"&gt;
      &lt;h2&gt;Welcome to TACT !&lt;/h2&gt;
      &lt;div id="myCarousel" class="carousel  slide" &gt;
        &lt;!-- Carousel items --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item  active" &gt;
              &lt;img alt=""  src="/eboxapps/img/3pp-1.png"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;1. Need a 3rd party jar?&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img alt=""  src="/eboxapps/img/3pp-2.png"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;2. Create Request&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img alt=""  src="/eboxapps/img/3pp-3.png"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;3. What happens?&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img alt=""  src="/eboxapps/img/3pp-4.png"&gt;
              &lt;div class="carousel-caption"&gt;
                  &lt;h4&gt;4. Status is Emailed&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Carousel nav --&gt;
        &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
        &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><img src="https://i.stack.imgur.com/SJaUs.png" alt="carousel image"></p>