centrado

[fersosa]

buenas! me está sucediendo algo extraño, supuestamente fácil de resolver, pero supongo que entreverado entre tanto código no logro darme cuenta.
quiero centrar el div que contiene otros cuatro. (tapanarrativa)
dejo códigos

Código HTML:

<!-- SECCION CONTENIDO -->
<div id="contenido">
 
 
  <div id="content">
   <fieldset id="desc">
    <legend><font color = "white">Narrativa</font></legend>
    
        <div id="seccionnarrativa"> 
        
        <div id="tapanarrativa">
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/elsilenciodelospajaros.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/elsilenciotapa.jpg" align="left"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/fabril.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/fabriltapa.jpg" align="left"/></a>
                </div>
            
            <div class="box2"><a href="http://www.forosdelweb.com/f53/horacio/invenciontardia.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/invenciontardiatapa.jpg" align="left"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/osodetrapo.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/osodetrapotapa.jpg" align="left"/></a>
                </div>
                </div>
           
         
           
    </div>
    
   </fieldset>
  </div>
    </div>
 
    
</div>   
    
</body>
</html>
 

Código CSS:

#tapanarrativa {
  margin: 0 auto;
  text-align: center;
}
.boxnarrativa{
width:200px;
height:200px;
background:#999;
float:left;
border:1px solid #444;
}
.box2{
width:200px;
height:200px;
background:#999;
clear:left;
float:left;
border:1px solid #442;
}