Soy bastante nuevo en HTML / CSS y he comenzado a tratar de aprender el diseño de CSS Flexbox. Solo estoy trabajando en una simple recreación de sitios desde cero utilizando flexbox.
En pantalla completa, el posicionamiento de la imagen en el logotipose ve bien. Sin embargo, cuando cambio el tamaño de la pantalla, mi barra de navegación en el lado derecho responde, pero la imagen del logotipo de la izquierda no. Aunque creo que lo he configurado correctamente.
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
Aquí también hay un enlace a mi trabajo: https://codepen.io/gkunthara/pen/VWdrYj
¿Qué estoy haciendo exactamente mal? ¡Todos los consejos sobre el tipo de posicionamiento que estoy haciendo con flexbox o con flexbox, en general, son apreciados!
Respuestas
1 para la respuesta № 1Eliminar posición en nav y establecer max-width: 100% en la imagen del logo.
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100
2 para la respuesta № 2
Eliminar posición
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}