Estoy realizando una web y viendo los cambios con Chrome. He terminado de maquetar la web y todo el contenido al cambiar a una resolución (1366X768) se descoloca y muchos elementos no ocupan el 100% de la caja. Me refiero a que me da la sensación que la vista por defecto del Chrome "estira" todos los elementos pero cuando cambio la resolución se descoloca todo siendo una resolución mayor.
Mi pregunta es ¿cómo puedo maquetar la página en una resolución concreta?
Pego el código:
.menu-navegacion {
position: fixed;
width: 22%;
height: 400px;
margin-top: 200px;
margin-left: 3%;
z-index: 10;
font-size: 1rem;
font-family: 'Monserrat', Arial, sans-serif;
font-weight: bold;
line-height: 50px;
text-transform: uppercase;
letter-spacing: 2px;
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
@media screen and (max-width: 480px) {
.menu-navegacion {
font-size: 2rem;
}
Nota: No puedo utilizar Bootstrap porque es un proyecto de fin de curso y en este caso no dejan utilizarlo. Sí que es verdad que las media query las explicó muy por encima y no me ha quedado nada claro.
}
) que podrían afectar a todos tus estilos. ¿Estás seguro que no tienes algún fallo de ese tipo en tu código completo?