title: Bootstrap carousel: images out of div when sliding
body: <p>I have a problem I can't figure out. I'm using bootstrap's carousel and everything works fine except for transitions: next items appear out of myCarousel div when the sliding transition starts and previous active items slide out of myCarousel div as they are being replaced by my next item.</p>
  
  <p>Here's my html code:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide span6"&gt;
       &lt;div id="carousel-inner"&gt;
              &lt;div class="active item"&gt;
                   &lt;img src="img/abstract-landscape-paintings-bursting-sun.jpg" /&gt;
               &lt;/div&gt;
               &lt;div class="item"&gt;
                    &lt;img src="img/charnwood_forest_landscape.jpg" /&gt;
               &lt;/div&gt;
        &lt;/div&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;
  </code></pre>
  
  <p>I'm only using the carousel script:</p>
  
  <pre><code>    $(document).ready(function() {
      $(".carousel").carousel({
          interval: 5000,
          pause: "hover",
      });
  });
  </code></pre>
  
  <p>Here's a link to an example of my problem so you can check my entire code: <a href="http://todoapp.nfshost.com/slide" rel="noreferrer">http://todoapp.nfshost.com/slide</a></p>
  
  <p>Anyone who can see what's the problem ?</p>
  
  <p>Thank you!</p>