I am struggling to fix the layout of my website's right dark column and sidebar. I've attempted several methods, including setting fixed parameters with no success. My goal is to have the content-c class (dark column) fixed and the sidebar fixed without overlapping each other or the main content column in the middle.
/* Custom Styling */
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
...
/* Media Queries */
@media (min-width: 768px) and (max-width: 991.98px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
...
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
...
<title>Hello, world!</title>
</head>
<body>
<div class="container-flex">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
...
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<nav class="" id="sidebar" style="position: fixed;">
...
</nav>
<div class="container-flex content-m col-5">
<div class="cont">
...
</div>
</div>
<div class="container-flex content-c col-4 bg-dark task-column" style="position: fixed;">
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"></div>
<div id="dvid">
<code>Code 0</code>
</div>
...
</div>
</div>
</div>
</body>
</html>