html - When i Zoom out web 4 div go down to next line -

any idea why when zoom out website 4div go down next line. demo: http://autovin.org/tp/

/* reset styles */ * {padding:0px; margin:0px;font-family:segoe ui;} /* background */ body {background:url(images/grids.gif) white;} /* wrapper */ .wrapper {width:998px;margin:0 auto;} /* header */ .header {padding:20px 0 20px 0;} /* navigation */ .nav {background:#82b2c9;color:white;} /* content */ .content {padding:10px 0;overflow:hidden;} /* box */ .box {width:240px; margin:0 10px 10px 0;border:1px solid black;float:left;} .box:nth-child(4n){margin:0;} /* pagination */ .pagination {clear:both;} /* footer */ .footer {background:#82b2c9;color:white;} 

i use percentages , em units instead of pixels because browsers more compatible them. in case, don't see people zooming out far anyways. want quick fix, suggest rethinking start. read box sizing , percentages. box sizing super great. luck!

http://jsfiddle.net/sheriffderek/xr6nc/

html

    <ul>         <li><a href="#">your block of text</a></li>         <li><a href="#">your block of text</a></li>         <li><a href="#">your block of text</a></li>         <li><a href="#">your block of text</a></li>         <li><a href="#">your block of text</a></li>         <!-- etc. -->     </ul>  </div> 

css

.container {     width: 100%;     max-width: 40em; /* whatever want */     border: 1px solid red;     overflow: hidden; }  .container ul {     padding: 0;     margin: 0;     list-style: none; }  .container {     width: 22%; /* isn't perfect - 23.5% - if use box-sizing: border-box; */     /* highly recomend make part of workflow in every project */     float: left;     border: 1px solid black;     min-height: 5em;     margin-right: 2%;     margin-bottom: 2%; }  .container li a:nth-of-type(4n+4) {     margin-right: 0;     }