I recently acquired a Bootstrap 4 theme and have been modifying some files to make it compatible with Flask. However, I'm facing an issue where the "main-container" div falls below the nav bar when I resize the page to full desktop browser size. In the original Bootstrap file, the index.html had the nav bar and page content on a single page. For Flask, I split this into three files: layout.html, index.html, and _navbar.html.
My goal is to have the content on the right side of the nav bar when stretched to full desktop size, but I'm struggling to identify what needs to be changed in order to achieve this.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script src="static/js/jquery.min.js"></script>
<script src="static/js/autosize.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/prism.js"></script>
<script src="static/js/draggable.bundle.legacy.js"></script>
<script src="static/js/swap-animation.js"></script>
<script src="static/js/dropzone.min.js"></script>
<script src="static/js/list.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
...
</section>
<section class="py-4 py-lg-5">
...
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
...
</div>
</div>