Using Bootstrap to build out a sidenav with aligned page content - html

Question

I have a simple side nav that I built out that I want fixed. From my understanding of bootstrap classes columns are supposed to be aligned. My second column for most of my page content ends up falling behind my sidenav. How do you have a second column aligned with your first while keeping that first column fixed?
#logo {
height: 40vh;
width: 20vw; }
.dropdown-toggle, .dropdown-menu {
width: 300px; }
.btn-group img {
margin-right: 10px; }
.dropdown-toggle {
padding-right: 50px; }
.dropdown-toggle .glyphicon {
margin-left: 20px;
margin-right: -40px; }
.dropdown-menu > li > a:hover {
background: white; }
/* $search-blue */
.dropdown-header {
background: #ccc;
font-size: 14px;
font-weight: 700;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 5px; }
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
border: 1px solid pink; }
/*# sourceMappingURL=notification.css.map */
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="background-color: #e0f7fa">
<div class="d-flex flex-row" style="border:1px solid black;">
<div class="col d-flex justify-content-start" style="border:1px solid blue;">
<img id="logo" src="./images/logo.png">
</div><!--logo -->
<div class="col d-flex align-items-center justify-content-end" style="border:1px solid red;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="http://lorempixel.com/75/50/abstract/" style="border-radius: 50%;">
0123 4567 8912 3456
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Member name (you)</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li class="dropdown-header">Member name</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
</ul>
</div>
</div><!--dropdown for profile image,name and description -->
</div>
</div><!--container for header -->
<div class="container-fluid" style="border: 1px solid black">
<div class="row">
<div class="col-4 position-fixed align-self-start">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Notification</h3>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul>Cancel Account</ul>
</nav>
</div>
<div class="col-8 align-self-center">
<h3>Send notifications via</h3>
</div><!--this should be directly next to navbar -->
</div>
</div><!--container for navbar and page content -->
You can see that I have a header in the top page with an image and a dropdown in its own container. Then following that I have a container with the sidenav and where it says "get notifications via" is misplaced. I added borders so you can see the where everything is located.