Удалить стороны контейнера

Question

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

Проблема, с которой я столкнулся, заключается в том, что класс контейнера в Bootstrap имеет значительную величину заполнения с каждой стороны, но я не могу уверенно удалить его. Я хочу, чтобы красный фон был на одном уровне с серым изображением и имел синий фон. Единственный способ, которым я смог обойти это, - использовать свойство CSS background-clip: content-box, но затем я начинаю сталкиваться с проблемами, когда начинаю добавлять такие вещи, как box-shadows.

Это то, что я прямо сейчас:

Это то, что я хочу иметь:

Вот мой код:

<div class="container content-color"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <img class="img-responsive" src="http://placehold.it/1140x360"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
    </div> 
</div> 


.circle { 
    background-color: #48c1b0; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
} 
body { 
    background-color: blue; 
} 
.content-color { 
    background-color: red; 
} 
} 

JS Fiddle: http://jsfiddle.net/rxvk0w2n/

Answer 1

col-* имеет отступы по умолчанию 15px на обоих, правая и левая сторона.

Итак, если вы хотите удалить отступы, просто использовать это в вашем CSS:

.removePaddingRightLeft { 
    padding-right: 0; 
    padding-left: 0; 
} 

И ваш HTML:

<div class="col-md-12 removePaddingRightLeft"> 
    <img class="img-responsive" src="http://placehold.it/1140x360"/> 
</div> 

Updated fiddle