html - Four Columns Equal Width, 0 Outer Margin, Equal Inner Margin -

this spin off display table-cell: remove right , left border space?.

i trying create solution using divs , inner margins of equal width unwanted spacing in between causing last div wrap.

https://jsfiddle.net/kyy7qglz/1/

* {     margin: 0;     padding: 0;     border: 0; } #container {     width: 100%;     background-color: blue; } .item {     margin-left: 4%;     width: 22%;     display: inline-block;     background-color: red; } .item:first-of-type {     margin-left: 0%; }  <div id="container">     <div class="item">         text 1     </div>     <div class="item">         text 2     </div>     <div class="item">         text 3     </div>     <div class="item">         text 4     </div> </div> 

where spacing coming , how rid of it?

the cleanest solution here use flexbox. when use display: inline-block saying “render these elements blocks of text” browser correctly shows white space included between html elements.

if instead set display: flex on container have more accurately described layout intend. namely, have said direct children of container should use flex layout (instead of layout intended text).

* {      margin: 0;      padding: 0;      border: 0;  }  #container {      background-color: blue;      display: flex;  }  .item {      margin-left: 4%;      flex: 1 0 auto;      background-color: red;  }  .item:first-of-type {      margin-left: 0%;  }

<div id="container">      <div class="item">          text 1      </div>      <div class="item">          text 2      </div>      <div class="item">          text 3      </div>      <div class="item">          text 4      </div>  </div>