Удалить margin на плавающих элементах

Question

Я работаю в простой сетке, и сейчас я столкнулся с проблемой с плавающими столбцами. Я использую сетку из 12 столбцов, и все мои столбцы имеют левое поле, которое я задал с помощью этого селектора: [class*='column'] + [class*='column'] { margin-left: 1.6%; }. Проблема состоит в том, что столбцы, которые не помещаются в одну и ту же строку, перемещаются вниз, но сохраняют запас, как вы можете видеть в this fiddle.

В этом примере у меня есть сетка, определяющая три четыре столбца шириной divs, один столбец шириной в шесть столбцов и ширину в восемь столбцов. Поскольку последние два из них не подходят, они смещены, но не выровнены по мере того, как они имеют запас. Что я могу сделать в этом случае, чтобы удалить маржу?

Answer 1

[class*='col-'] { 
    height: 20px; 
    position: relative; 
    float: left; 
} 
[class*='col-'] +[class*='col-'] { 
    margin-left: 1.6%; 
} 
.row, [class*='col-'] { 
    box-sizing: border-box; 
} 
.row:before, .row:after { 
    content:" "; 
    display: table; 
} 
.row:after { 
    clear: both; 
} 
.col-4 { 
    background-color: red; 
    width: 32.2666666667%; 
} 
.col-6 { 
    background-color: green; 
    width: 49.2%; 
} 
.col-8 { 
    background-color: red; 
    width: 66.1333%; 
} 
#d6{ 
    margin:0%; 
} 
#d8{ 
    margin:0%; 
} 



and then your html: 


<div class="row"> 
    <div class="col-4"></div> 
    <div class="col-4"></div> 
    <div class="col-4"></div> 
    <div id="d6" class="col-6"></div> 
    <div id="d8" class="col-8"></div> 
</div>