title: Bootstrap carousel left right nav issue
body: <p>I copied the following <a href="http://www.bootply.com/81478" rel="nofollow noreferrer">carousel</a> for bootstrap 3.  When first load it, it looks good.  </p>
  
  <p><a href="https://i.stack.imgur.com/lt1Pq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lt1Pq.jpg" alt="enter image description here"></a></p>
  
  <p>But when I click on either the left or right navigation the bottom expands (I circled it in red):</p>
  
  <p><a href="https://i.stack.imgur.com/Pqauo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pqauo.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          .carousel-control {
              padding-top: 10%;
              width: 5%;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;h1&gt;Bootstrap 3 Thumbnail Slider&lt;/h1&gt;
  
              &lt;div class="well"&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;div class="row"&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x"&gt;&lt;img src="http://placehold.it/500x500" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--/row--&gt;
                          &lt;/div&gt;
                          &lt;!--/item--&gt;
                          &lt;div class="item"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--/row--&gt;
                          &lt;/div&gt;
                          &lt;!--/item--&gt;
                          &lt;div class="item"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-3"&gt;
                                      &lt;a href="#x" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" class="img-responsive"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--/row--&gt;
                          &lt;/div&gt;
                          &lt;!--/item--&gt;
                      &lt;/div&gt;
                      &lt;!--/carousel-inner--&gt; &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&amp;#60;&lt;/a&gt;
  
                      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&amp;#62;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!--/myCarousel--&gt;
              &lt;/div&gt;
              &lt;!--/well--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script language="javascript"&gt;
  
          $(document).ready(function () {
              $('#myCarousel').carousel({
                  interval: 10000
              })
  
              $('#myCarousel').on('slid.bs.carousel', function () {
                  //alert("slid");
              });
  
          });
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I copied it directly from the site so i'm not sure why its happening.  Any help would be appreciated</p>