<nav class="navbar navbar-expand-sm navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
order
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact
</a>
</li>
</ul>
</div>
</nav>
I've been facing an issue where I can't seem to center the nav-items within my navbar. Despite using the mx-auto class, it still aligns to the right. Attempting to use margin-left doesn't work as it compromises responsiveness. The navbar-nav itself centers but not its items. Any suggestions on how I could resolve this? Thank you.