title: Bootstrap full carousel unwanted margins
body: <p>I can't figure out why I can't get rid of the white margins on my carousel. I would like to have the carousel's pictures fill the whole space from left to right.</p>
  
  <p>Could you tell me how to correct my code please?</p>
  
  <pre><code> body {
     padding: 0;
     margin: 0;
     overflow-y: scroll;
     font-family: arial;
     font-size: 18px;
   }
   .carousel .item {
     width: 100%;
     /*slider width */
   }
   .carousel .item img {
     width: 100%;
     /*img width*/
   }
   .container {
     width: 100%;
   }
  
    &lt;div class="container"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
  
        &lt;!-- Wrapper for slides --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
            &lt;img id="beach" src="images/beach.jpg"&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
            &lt;img src="images/mountain.jpg"&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
            &lt;img src="images/island.jpg"&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>