I've been attempting to position a div to the right side of a vertical navigation in Bootstrap 4, but I'm struggling to achieve the desired layout:
<div class="container mt-3">
<div class="nav navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Some cool thing</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#my-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Some menu entry</a>
</li>
</ul>
</div>
</div><!-- end of .nav -->
<div class="row mt-2">
<div class="nav flex-column nav-pills col-md-5">
<a href="#" class="nav-link active">Something</a>
</div>
<div class="col-md-7 border">
<h1>Hello world</h1>
</div>
</div>
</div>
Unfortunately, the navigation and the div to the right (border barely visible) are extending beyond their intended boundaries, wider than the top navbar:
https://i.sstatic.net/0ldLr.png
This CodePen demonstrates the issue. Are there any Bootstrap classes that can address this or should I manually adjust the layout?
If I remove the <div class="row"> and place the components directly in the <div class="container">, the boundaries are correct but lose the desired side-by-side alignment.