Why is the fluid-container overlapping in this way, while others are not?
Does this look correct to you, or am I overlooking something? It seems incorrect to me.
<nav class="nav flex-column float-left">
{links}
</nav>
<div class="container-fluid"><!-- overlapping -->
<div class="row"><!-- fine -->
<div class="col"><!-- fine -->
<main role="main"><!-- fine -->
{content}
</main>
</div>
</div>
</div>
https://jsfiddle.net/w3LwwxL7/
Edit: Just for your information: My goal is to have a static left sidebar/nav with a fixed width (refer to the image). All content on the right side is considered main content. Hence, I chose not to use col-1 (for nav) and col-11 (for main). I hope this clarifies things :-)