Удалить набивку между перевалами

Question

у меня есть:

<div class="container" style="background-color: red"> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <div style="background-color: green;">1111<br /><img src="http://i.imgur.com/45IxCbL.png" class="img-responsive img-circle center-block" style=""></div> 
    </div> 
    <div class="col-xs-3"> 
     <div style="background-color: blue">222<br /><img src="http://i.imgur.com/45IxCbL.png" class="img-responsive img-circle center-block" style=""></div> 
    </div> 
    <div class="col-xs-3"> 
     <div style="background-color: yellow">333<br /><img src="http://i.imgur.com/45IxCbL.png" class="img-responsive img-circle center-block" style=""></div> 
    </div> 
    <div class="col-xs-3"> 
     <div style="background-color: orange;">444<br /><img src="http://i.imgur.com/45IxCbL.png" class="img-responsive img-circle center-block" style=""></div> 
    </div> 
    </div> 
</div> 

Живой пример: https://jsfiddle.net/t814cmts/10/

Я хотел бы удалить отступы между перевалами, так что я добавить в CSS:

.container div.col-xs-3 { 
    padding: 0; 
} 

Это работает нормально, но я также хотел бы добавить дополнение или маржу к первому (111 - padding/margin-left) и последний элемент (444 - padding/margin-right). Поэтому я добавил просто поля для детей:

https://jsfiddle.net/t814cmts/11/

Но теперь первый и последний элементы меньше, чем второй и третий.

Как я могу наилучшим образом сделать margin/padding только для первого и последнего элементов без использования px?

Answer 1

Я хотел бы добавить отступ в строке, а не столбцы

.container div.row { 
    padding: 0 15px; 
} 
.container div.col-xs-3 { 
    padding: 0; 
} 

https://jsfiddle.net/s3j3mywz/2/

Answer 2

Добавить style="margin-left: 15px; margin-right: 15px" в div.row.

Здесь JSFiddle

Или вы можете обернуть col-xs-3 дивы в другой DIV и установить над стилем.