Css boxes centering like ios home screen

[valuecom]

how do i get this result without the last item in row:\[code\]margin-right: 30px;\[/code\]in css, now i use:\[code\]margin-right: 30px;margin-bottom: 30px;\[/code\]it should be like the ios home screenhttp://www4.picturepush.com/photo/a/12640862/img/12640862.pnghttp://www3.picturepush.com/photo/a/12640866/img/12640866.pnghtml:\[code\]<div class="home-main"> <a href="http://stackoverflow.com/questions/15883622/t1home" class="item"><h1>Hallo</h1></a> <a href="http://stackoverflow.com/questions/15883622/t1home" class="item"><h1>Hallo</h1></a> <a href="http://stackoverflow.com/questions/15883622/t1home" class="item"><h1>Hallo</h1></a> <a href="http://stackoverflow.com/questions/15883622/t1home" class="item"><h1>Hallo</h1></a></div>\[/code\]css:\[code\] .home-main { width: 90%; max-width: 960px; min-height: 100px; margin: 0 auto; overflow: hidden; text-align: center;}.home-main a { width: 126px; min-height: 126px; max-height: 166px; margin-right: 30px; margin-bottom: 30px; background-color: #777; float: left; color: #fff; text-decoration: none;}.home-main a:nth-last-child(1){ margin-right: 0;}.home-main a h1 { width: 100%; height: 33px; margin: 0; margin-top: 126px; padding-top: 7px; font-size: 19px; text-align: center; background-color: #222;}@media screen and (width:320px){ .home-main a:nth-child(even) { margin-right: 0; }}\[/code\]