Bootstrap carousel: images out of div when sliding

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden">
 <div id="carousel-inner">
        <div class="active item">
             <img src="img/abstract-landscape-paintings-bursting-sun.jpg" />
         </div>
         <div class="item">
              <img src="img/charnwood_forest_landscape.jpg" />
         </div>
  </div>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

Hey Friend add overflow hidden in the myCarousel id.

You can add this in your css :

.carousel { overflow: hidden; }

and

.item { overflow: hidden: }