html - keep divs from jumping a line float -

i working on responsive webpage , it's working out pretty well. problem when browser gets smaller , hits div, div jump line. here code:

html:

<div id = "wrapper"> <div class = "divs"> div 1 </div>  <div class = "divs"> div 2 </div>  <div class = "divs"> div 3 </div>  </div> 

css:

.divs{ width:100px; float:left; background-color: red; margin-left: 10px; text-align:center; }  #wrapper{ width:400px;  }  @media screen , (max-width:399px){ #wrapper{ width:100% } .divs{ width: 33.33%; } 

live example in jsfiddle

the div jumps lines because adding 10px margin left of each div. margins (and padding) added width of element, not included in it. div width of 30px , left margin of 10px take 40px of screen.

the easiest solution changing width accommodate margin, setting margin percentage well:

.divs{    width: 100px;    float:left;    background-color: red;    margin-left: 3%; /* changed margin % responsive */    text-align:center; }   .divs{    width: 30%; /*reduced width accommodate margin */ }