I am trying to achieve a responsive centering of my navbar-brand across all platforms, while also positioning my nav items and links, including the navbar-toggler, on the right side. Currently, on larger screens, it appears as shown in this image: here. However, I am struggling to get the navbar-brand centered at all.
When I shrink the screen below 991px, the navbar does center, but the alignment with the items looks strange. You can see how it appears on smaller screens here.
I am only using Bootstrap and my CSS file is empty so far. I have attempted to override the styling in my CSS file, but it does not center the navbar. I have also consulted Bootstrap's documentation, but I have been unable to resolve the issue.
I suspect the problem lies with the navbar-expand-lg class, as it impacts the alignment of the nav-links and navbar-brand when the screen shrinks below 991px. Here is the code I am using:
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto ">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</nav>