I can't access the Cuppela page unfortunately, but I would suggest the problem lies in the choices of class being used.
container-fluid
is designed to fill 100% of the width of the container it's placed in, and you're wrapping the this with a
div
element with no width description. It means your
<div id="main_nav">
isn't going to automatically fill the width of the screen, so your child
container-fluid
isn't going to either.
You can actually combine
container
and
container-fluid
to achieve what appears on StackOverflow. Simply have the
container-fluid
be the outer element (which will fill the screen width to 100%), and then have a child
container
inside it which will have the restricted width:
<div class="container-fluid bg-light">
<nav class="container navbar">
<a class="navbar-brand">
Hello world
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
</ul>
</nav>
</div>