Why not just float them left ? (and resize your container to fit them..)
This way you have better control of the margins, since the font-size
does not affect them (nor the whitespace)
#mainparent
{
width:480px;
height:200px;
background:#ccc;
}
.boxes
{
width:50px;
height:50px;
float:left;
margin:5px;
background:#000;
}
Demo at http://jsfiddle.net/JxhP8/32/
Update
If you want the elements left aligned amongst themselves but center aligned in their container, you will need another element in the middle and some javascript..
Here is a jquery implementation
html
<div id="mainparent">
<div class="centerized">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
..
..
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
</div>
css
#mainparent
{
background:#ccc;
}
.centerized{
overflow:hidden; // to grow according to the boxes
margin:0 auto; // to be centered in container
}
jquery
$(function(){
// cache the repeatedly used elements
// and fixed values
var main = $('#mainparent'),
centerized = main.find('.centerized'),
itemWidth = main.find('.boxes').outerWidth(true);
$(window).resize(function(){
var fitItems = (main.width() / itemWidth) | 0;
centerized.width(fitItems * itemWidth);
}).trigger('resize');
});
Demo at http://jsfiddle.net/JxhP8/34/