Bootstrap полная карусель нежелательных полей

Question

Я не могу понять, почему я не могу избавиться от белых полей на моей карусели. Я хотел бы, чтобы фотографии карусели заполняли все пространство слева направо.

Не могли бы вы рассказать мне, как исправить мой код, пожалуйста?

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> 

Answer 1

Убедитесь, что вы правильно использовали сетку Bootstrap. Контейнер со строкой и без столбца оставит нулевое дополнение.

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

Demo

документ инспектор вашего браузера будет быстро показать вам, какой элемент (ы) вызывают такие проблемы, как это.

Answer 2

У вас есть дополнительный закрывающий тег после последнего элемента изображения. И вы должны использовать другие аспекты, все готовые, упомянутые в этом сообщении, до сих пор, используя container (или container-fluid), row, а затем carousel для вашей иерархии.

<div class="item"> 
    <img src="images/island.jpg"> 
    </div> 
</div> <!--/INNER CAROUSEL CLOSE--> 
</div> <!--REMOVE ME! IM ONE TOO MANY-->