Bootstrap full carousel unwanted margins

Question

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.

Could you tell me how to correct my code please?

 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%;
 }

  <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img id="beach" src="images/beach.jpg">
        </div>

        <div class="item">
          <img src="images/mountain.jpg">
        </div>

        <div class="item">
          <img src="images/island.jpg">
        </div>

      </div>

    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Solution

Make sure you have used Bootstrap's grid correctly. A container with a row and no column will leave zero padding.

<div class="container-fluid">
    <div class="row">
        <div class="carousel-inner">

Demo

Your browser's document inspector would quickly show you what element(s) are causing issues like this.