Seeking assistance with HTML, CSS, and Bootstrap. I'm trying to create a template for my website that includes a top header, a side navigation bar, and a main section. However, I am struggling to position these elements correctly. The side navbar is appearing in the top right corner instead of below the header, and the main content is displaying under the sidebar. I've experimented with various Bootstrap classes, organizing sections into rows and columns, and have even searched for solutions online without success. Any guidance or insights would be greatly appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Template</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d50141e12130e3d4c5348534d">[email protected]</a>/font/bootstrap-icons.css">
</head>
<body>
<div class="wrapper align-items: stretch">
<!-- top navigation bar -->
<nav class="navbar navbar-expand-lg bg-white fixed-top border-primary border-bottom border-5">
<div class="container-fluid">
<img src="/images/favicon.png" class="rounded float-start" height="45" alt="">
<a class="navbar-brand me-auto ms-lg-0 ps-3">
<h5 class="home_text">Casa Coco </h5>
</a>
</div>
</nav>
<!-- top navigation bar end-->
<!-- sidebar -->
<div class="d-flex flex-column flex-shrink-0 bg-primary sidebar nopadding" style="width: 3.5rem">
<ul class="nav nav-pills nav-flush flex-column mt-1 text-center">
<li class="nav-item">
<a href="#" class="nav-link active py-3 bg-primary" aria-current="page" title="Home"
data-bs-toggle="tooltip" data-bs-placement="right">
<i class="bi bi-house-door "></i>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active py-3 bg-primary" aria-current="page" title="Dashboard"
data-bs-toggle="tooltip" data-bs-placement="right">
<i class="bi bi-speedometer2"></i>
</a>
</li>
</ul>
</div>
<!-- sidebar end-->
<div id="content">
<main class="mt-5 pt-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem mollitia voluptatibus excepturi
temporibus
magnam ducimus perspiciatis, quibusdam deserunt vitae maiores doloribus voluptas porro cum, distinctio
officia,
natus quod explicabo eum?
</main>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js" />
<script src="./js/jquery-3.5.1.js" />
<script src="./js/jquery.dataTables.min.js" />
<script src="./js/dataTables.bootstrap5.min.js" />
<script src="./js/script.js" />
</body>
</html>