Código HTML :
<body> <header> <div id="top-header"> </div> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Portafolio</a></li> <li><a href="#">Acerca</a></li> <li><a href="#">Contácto</a></li> </ul> </nav> </header> <section id="main-content"> </section> <footer></footer> </body>
Todo muy sencillo, ahora mis estilos dejan un forma básica así:
El problema es que a la hora de cambiar la resolución del navegador, pasa esto:
El estilo del nav, está bien ya que tiene definido de width: 1000px;, pero cuando se disminuye la resolución, me gustaría que no se viera ese "agujero", intenté poner un div que contenga ese nav y le agregué width: 100% y color, pero no sirvió para mi. Acá les dejo el código css y también un archivo para descargar con el index y css.
Código CSS :
*{
margin: 0;
}
body{
background: lightgray;
}
header{
width: 100%;
background: #444444;
}
header #top-header{
background: #444444;
width: 1000px;
margin: 0 auto;
height: 70px;
}
#main-content{
width: 1000px;
margin: 0 auto;
}
/*Menú*/
nav{
width: 100%;
margin: 0 auto;
background: #101010;
}
nav ul{
width: 1000px;
margin: 0 auto;
font-size: 0;
padding: 0;
}
nav ul li{
display: inline-block;
font-size: 0;
}
nav ul li:hover{
background: #66A5FF;
}
nav a{
font-family: Monda;
font-size: 16px;
padding: 0 10px;
text-decoration: none;
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}Siempre he tenido este problema, tengo la impresión de que es por combinar porcentaje y anchos definidos. Muchas gracias por la ayuda y sí googleé bastante, pero no encontré errores parecidos.
