ho un problema con dei box, praticamente ho un contenitore al cui interno ci sono 4 box affiancati con float: left, io vorrei che fossero centrati rispetto alla pagina ma non riesco a smuoverli dalla sinistra, ho cercato nel forum e ho visto che dovrei utilizzare text-align e margin: 0 auto (per andare bene con firefox e IE) ma sembra che la mia pagina li ignori

il codice
codice:
#contenitore{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	clear: both;
}
.box{
	text-align: center;
	float: left;
	width: 18%;
	margin: 3px;
	background-color: #ececec;		
	color: #CCCCCC;
	border: 1px solid #ffffff;
}
....
<div id="corpo">
<div class="header">...</div>

<div id="contenitore">
<div class="box"> ... </div>
<div class="box"> ... </div>
<div class="box"> ... </div>
<div class="box"> ... </div>
</div>

<div class="footer">...</div>
</div>
dove sbaglio?
grazie per l'aiuto