How to center wrapper with floating content - css

Question

I have a wrapper wrapping number of large 300 by 300 divs. when the browser is in full screen the wrapper sits in the center. But when I resize the browser the content flows to second the line, but the wrapper takes 100% of the window. For example the browser window width is 800px the content is 4 blocks 300px by 300px so two blocks together takes only 600px and the other two are in the second line. My problem is that wrapper stretches to 800px and the content sits to the left of the screen and i want it in the center (when I use float: left)
When I try the same using display: inline-block and text-align: centre, I can have the content centred in the screen even though the wrapper stretches to 100% of the width. Problem no1. with this solution is that is that if only one block is in the last row than it is centred right in the middle the second problem is mobile browser counts font-size: 0 somehow differently so it is a little misaligned.
simplified fiddle you can see that if the window is small the third orange box falls to second line but is centred. When I use text-align: left than all boxes are against left side leaving significant space on right.
here is the relevant CSS I have on site:
#site-wrapper {
min-height:100%;
text-align: center;
position:relative;
}
#container {
position:relative;
width: auto;
margin: 0 auto;
display: inline-block;
padding-bottom:40px; /* Height of the footer */
}
div#content-wrapper{
padding:5px 0 5px 0;
font-size: 0;
text-align: center;
margin-left: auto;
}
#column1, #column2, #column3 {
margin-right: 5px;
}
#column-last{
margin-right: 5px;
}
div.column {
//float: left;
display: inline-block;
vertical-align: top;
font-size: 0;
}
.item {
background: #0072C6;
width: 20em;
padding: 5px;
height: auto;
margin: 0 0 5px 0;
font-size: 14px;
color: #FFF;
box-shadow: inset 0 0 100px #1082D6;
}