Salve,
ho creato un #container in cui mettere tutto il sito, larghezza 972px.

Dentro il container ci sono div flottanti di 972px, il logo e poi un div chiamato #boxtestata

Ora, siccome vorrei creare 4 piccoli box che stiano centrati, ho pensato di mettere 4 div all'interno di #boxtestata chiamandoli #box1, #box2 ,#box3 e #box4

Se io do margin:auto a #container mi si centra container e ok..

ma se poi lo do anche a #boxtestata i box all'interno non sono centrati, come posso fare per centrarli?

HTML
codice:
<body>
  <div id="container">
    <div id="logo">
    </div>
    <div id="boxtestata">
      <div id="box1">
      </div>
      <div id="box1">
      </div>
      <div id="box1">
      </div>
      <div id="box1">
      </div>
    </div>
  </div>
</body>
CSS

codice:
body{
background:#3c71a3 url(images/bg.jpg) repeat-x 0 0;

margin:0;
padding:0;
}
/*---------------------------------*/
/*CONTENITORE*/
/*---------------------------------*/
#container{
background:#fff;
width:972px;
height:972px;
margin:auto;
padding:0;
}
/*---------------------------------*/
/*LOGO con SFONDO NUVOLE*/
/*---------------------------------*/
#logo{
float:left;
height:103px;
width:972px;
margin:0;
padding:0;
background: url(images/nuvole.jpg) 0 0 no-repeat;
}
/*---------------------------------*/
/*CONTENITORE BOX + box piccoli*/
/*---------------------------------*/
#boxtestata{
margin:auto;
float:left;
width:972px;
height:191px;
padding:0;
}
#box1{
float:left;
width:222px;
height:191px;
display:block;
border:2px solid #000;
padding:0px;
margin:5px;
background: url(images/eolico.jpg);
}