Warum überlappt der Container meine Sidebar-ish <nav>?

Question

Warum überlappt sich der Flüssigkeitsbehälter, aber andere nicht?
Ist das richtig, oder fehlt mir etwas? Sieht falsch für mich aus.

<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: Nur für Sie zu wissen: Ich habe eine statische linke Sidebar/nav mit einer festen Breite erreichen will (siehe Bild). Alles auf der rechten Seite ist Hauptinhalt. Deshalb habe ich col-1 (nav) und col-11 (main) nicht verwendet. Hope this :-) Hier

Answer 1

Geben Sie Ihren sidenav eine festes width und legen Sie eine padding-left (gleiche Menge an Sidebar Breite)

ist ein Beispiel hilft: https://jsfiddle.net/w3LwwxL7/3/