Texto problemas al achicar pantalla

[fersosa]

Claro, disculpas por no ser tan claro.
el código es:

Código HTML:

<div id="libros"> 
        
        <div id="narrativa"><p>Narrativa</p>
            <a href="http://www.forosdelweb.com/f53/responsive/narrativa.html"><img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/elrevestapa.jpg" align="left"/></a>
                </div>
        <div id="poesia"><p><h1>Poesía</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/fabriltapa.jpg" align="left"/>
                </div>
        <div id="infantil"><p><h1>Infantil</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/osodetrapotapa.jpg" align="left"/>
                </div>
        <div id="otro"><p><h1>Otro</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/jorobadotapa.jpg" align="left"/>
                </div>    
        <div id="otro2"><p><h1>Otro2</h1></p>
            <img src="http://www.forosdelweb.com/f53/responsive/images/tapaslibros/sonetosadostapa.jpg" align="left"/>
                </div>   
         
           
    </div>
 

y el css es:

Código CSS:

#libros {
    width: 100%;
    padding: 20px;
    height: auto;
}
#libros div {
  display: inline-block;
  width: 20%;
  padding: 18px;
}
 
#libros #otro2 {
  display: block;
}
#libros img {
    width: 100%;
    height: auto;
}
#narrativa {
    text-align: center;
    font: 200% Arial;
    word-wrap: break-word;
}
 

gracias!