No se porque mi tiutlo se me va super lejos dejó el código en css
header {
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
top:110px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
¡Hola Luis!
Por lo que puedo ver en tu código CSS, estás usando la propiedad "position: absolute" en el elemento "nav", lo que hace que se posicione de forma absoluta en relación a su elemento padre más cercano que tenga una posición relativa. En este caso, ese elemento padre es "header", que tiene un padding de 20px en la parte superior.
Para solucionar el problema con el título, puedes agregar un padding-top al elemento "header" que sea igual o mayor a la altura de tu elemento "nav". Por ejemplo, si tu "nav" tiene una altura de 50px, puedes agregar "padding-top: 50px;" al elemento "header".
Tu código CSS quedaría así:
header {
background-color: #BBBBBB;
padding: 70px 0 20px 0; /* Cambié el valor del padding-top a 70px */
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
top:110px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}Espero que esto te ayude a solucionar tu problema. Si tienes alguna otra duda, no dudes en preguntar.
¡Espero haber ayudado y buenos estudios!