I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small" viewport size.
This is my current code:
<nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
<div class="nav col-sm-6 bg-secondary">
<DIV class="mx-auto">
<a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
</DIV>
</div>
<div class="col-sm-6">
<ul class="nav mx-auto float-sm-right text-dark bg-success">
<li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
<li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
</ul>
</div>
</nav>
DISCLAIMER: Excuse the obnoxious backgrounds, they were used for debugging grid responsiveness and determining where to apply utilities.
At a wide viewport, everything appears correct. However, upon shrinking the width, the logo becomes centered while the menu jumps to be left-justified. I attempted applying mx-auto to the line above it (in the DIV), but no change was seen in behavior.
What step did I overlook?