I'm struggling with this code and can't seem to keep the navbar-brand aligned with the links.
<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse"
id="navbarSupportedContent-5" style="">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
The navbar-brand class doesn't seem to respond to "m-auto" or "text-align: center".
My attempts to center everything by wrapping them in a div have failed and even broke the collapse button.
I haven't been able to find any resources on how to center the navbar-brand with the links grouped together when centered.
My goal is to create a fixed top navbar with a col-7 on the left and col-5 on the right, each centered within its own column. While this is usually achievable with divs, the navbar css is not behaving as expected.