¿Cómo eliminar este espacio entre el logo y los elementos de la lista en la barra de navegación?
Quiero que los elementos de la barra de navegación se alineen a la izquierda junto al logotipo, pero no puedo lograrlo.
¿Alguien sabe qué está pasando?
Cómo se ve:
aquí
El espacio que quiero eliminar:
aquí
Mi código HTML:
<nav id="nav-bar">
<a href=""><img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo"></a>
<ul class="nav__menu">
<li class="nav__item">
<a class="nav-link" href="">Opciones</a></li>
<li class="nav__item">
<a class="nav-link" href="">Cómo funciona</a></li>
<li class="nav__item">
<a class="nav-link" href="">Registrarse</a></li>
</ul>
</nav>
Mi CSS:
#nav-bar {
display: flex;
position: fixed;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
width: 25%;
margin-top: 6px;
margin-left: 10px;
margin-right: 0;
}
davy.ai
Para alinear los elementos de la barra de navegación a la izquierda junto al logotipo, puedes agregar la propiedad CSS
margin-left: autoal selector.nav__menu. Esto empujará los elementos de navegación hacia el borde derecho del contenedor, junto al logotipo.Tu código CSS actualizado se vería así:
Esto debería eliminar el espacio adicional a la derecha y alinear los elementos de la barra de navegación a la izquierda junto al logotipo.