Apologies if this question has already been asked. I've searched for solutions to this problem, but they all involve Bootstrap or similar frameworks, not pure CSS.
The issue I'm facing is with a navbar that contains three elements: https://i.sstatic.net/xJHlQ.jpg
I used flexbox to center everything, which worked well, except the left and right elements have different widths. As a result, the logo is centered between them, causing it to be slightly off to the right relative to the container. How can I make the logo centered relative to the container regardless of width and still keep it responsive?
I've spent hours trying to find a solution, but so far, my only idea was to add an invisible element to create extra margin on the right. Is there a simpler solution that I'm missing?
Here's the part of the code in question:
.nav {
display: flex;
border: 2px solid red;
/* justify-content: space-between; */
align-items: center;
}
.nav__list--primary {
gap: 1.5rem;
}
.nav__list--secondary {
gap: 6rem;
border: 1px solid blue;
}
.navbar__item--icon {
margin-top: 0.5rem;
}
.logo {
margin: 0 auto;
}
header {
margin-bottom: 6rem;
}<header>
<div class="container">
<nav class="nav">
<ul class="nav__list nav__list--primary row">
<li class="navbar__item">
<a class="text--black" href="#">SHOP</a>
</li>
<li class="navbar__item">
<a class="text--black" href="#">VISIT US</a>
</li>
<li class="navbar__item">
<a class="text--black" href="#">EVERYTHING ELSE</a>
</li>
</ul>
<a href="#" class="navbar__item logo text--black">
GRIND
</a>
<ul class="nav__list nav__list--secondary row">
<li class="navbar__item--icon">
<a class="text--black" href="#">
<i class="bx bx-user-circle"></i>
</a>
</li>
<li class="navbar__item--icon">
<a class="text--black" href="#">
<i class="bx bx-shopping-bag"></i>
</a>
</li>
</ul>
</nav>
</div>
</header>