Bootstrap 5 Dashboard: Why is the Center Section Misaligned in my Django Template?

Django version: 5.1.5
Bootstrap version: 5.3.3
Python version: 3.12.4
Platform: Laptop, 1920 x 1080

I'm exploring Django and Bootstrap 5, and I've downloaded an open-source Bootstrap 5 dashboard template for practice. However, the center section of the page is not aligning directly under the navbar as intended—it sits noticeably lower on the page. I have verified that all Bootstrap CSS and JS files are being loaded correctly via {% load static %} and they work fine in other examples. I'm including the relevant Django template code and a screenshot for context. Any guidance on correcting the layout would be greatly appreciated.

DJANGOCopied
{% extends 'console_app/base.html' %}
{% load static %}
{% block content %}

    <nav class="navbar navbar-light bg-light p-3">
        <div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
            <a class="navbar-brand" href="#">
                Simple Dashboard
            </a>
            <button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
            <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
        </div>
        
    </nav>
    <div class="container-fluid"> 
        <div class="row"> 
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> 
                <div class="position-sticky"> 
                    <ul class="nav flex-column"> 
                        <li class="nav-item"> 
                          <a class="nav-link active" aria-current="page" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                            <span class="ml-2">Dashboard</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                          <a class="nav-link" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
                            <span class="ml-2">Orders</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                          <a class="nav-link" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                            <span class="ml-2">Products</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                          <a class="nav-link" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                            <span class="ml-2">Customers</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                          <a class="nav-link" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
                            <span class="ml-2">Reports</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                          <a class="nav-link" href="#"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                            <span class="ml-2">Integrations</span>
                          </a>
                        </li>
                        <li class="nav-item"> 
                            <a class="btn btn-sm btn-secondary ml-3 mt-2" href="https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial"> 
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> 
                                    <path fill-rule="evenodd" d="M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/> 
                                </svg> 
                                <span class="ml-2">Read tutorial</span> 
                            </a> 
                        </li> 
                        <li class="nav-item"> 
                            <a class="btn btn-sm btn-warning ml-3 mt-2" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> 
                                ⚡︎ Volt Dashboard 
                            </a> 
                        </li> 
                        <li class="nav-item"> 
                            <a class="btn btn-sm btn-primary ml-3 mt-2" href="https://themesberg.com"> 
                                By Johnny ❤️ 
                            </a> 
                        </li> 
                      </ul> 
                </div> 
            </nav> 
            
            <!-- START OF CENTER AREA OF --> 
            <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4"> 
                <nav aria-label="breadcrumb"> 
                    <ol class="breadcrumb"> 
                        <li class="breadcrumb-item"><a href="#">Home</a></li> 
                        <li class="breadcrumb-item active" aria-current="page">Overview</li> 
                    </ol> 
                </nav> 
                <h1 class="h3">Dashboard</h1> 
                <p>This is the Sample DashBoard</p> 
                <div class="row my-4"> 
                    <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"> 
                        <div class="card"> 
                            <h5 class="card-header">Customers</h5> 
                            <div class="card-body"> 
                              <h5 class="card-title">345k</h5> 
                              <p class="card-text">Feb 1 - Apr 1, United States</p> 
                              <p class="card-text text-success">18.2% increase since last month</p> 
                            </div> 
                          </div> 
                    </div> 
                    <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3"> 
                        <div class="card"> 
                            <h5 class="card-header">Revenue</h5> 
                            <div class="card-body"> 
                              <h5 class="card-title">$2.4k</h5> 
                              <p class="card-text">Feb 1 - Apr 1, United States</p> 
                              <p class="card-text text-success">4.6% increase since last month</p> 
                            </div> 
                          </div> 
                    </div> 
                    <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3"> 
                        <div class="card"> 
                            <h5 class="card-header">Purchases</h5> 
                            <div class="card-body"> 
                              <h5 class="card-title">43</h5> 
                              <p class="card-text">Feb 1 - Apr 1, United States</p> 
                              <p class="card-text text-danger">2.6% decrease since last month</p> 
                            </div> 
                          </div> 
                    </div> 
                    <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3"> 
                        <div class="card"> 
                            <h5 class="card-header">Traffic</h5> 
                            <div class="card-body"> 
                              <h5 class="card-title">64k</h5> 
                              <p class="card-text">Feb 1 - Apr 1, United States</p> 
                              <p class="card-text text-success">2.5% increase since last month</p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                <div class="row"> 
                    <div class="col-12 col-xl-8 mb-4 mb-lg-0"> 
                        <div class="card"> 
                            <h5 class="card-header">Latest transactions</h5> 
                            <div class="card-body"> 
                                <div class="table-responsive"> 
                                    <table class="table"> 
                                        <thead> 
                                          <tr> 
                                            <th scope="col">Order</th> 
                                            <th scope="col">Product</th> 
                                            <th scope="col">Customer</th> 
                                            <th scope="col">Total</th> 
                                            <th scope="col">Date</th> 
                                            <th scope="col"></th> 
                                          </tr> 
                                        </thead> 
                                        <tbody> 
                                          <tr> 
                                            <th scope="row">17371705</th> 
                                            <td>Volt Premium Bootstrap 5 Dashboard</td> 
                                            <td>johndoe@gmail.com</td> 
                                            <td>€61.11</td> 
                                            <td>Aug 31 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                          <tr> 
                                            <th scope="row">17370540</th> 
                                            <td>Pixel Pro Premium Bootstrap UI Kit</td> 
                                            <td>jacob.monroe@company.com</td> 
                                            <td>$153.11</td> 
                                            <td>Aug 28 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                          <tr> 
                                            <th scope="row">17371705</th> 
                                            <td>Volt Premium Bootstrap 5 Dashboard</td> 
                                            <td>johndoe@gmail.com</td> 
                                            <td>€61.11</td> 
                                            <td>Aug 31 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                          <tr> 
                                            <th scope="row">17370540</th> 
                                            <td>Pixel Pro Premium Bootstrap UI Kit</td> 
                                            <td>jacob.monroe@company.com</td> 
                                            <td>$153.11</td> 
                                            <td>Aug 28 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                          <tr> 
                                            <th scope="row">17371705</th> 
                                            <td>Volt Premium Bootstrap 5 Dashboard</td> 
                                            <td>johndoe@gmail.com</td> 
                                            <td>€61.11</td> 
                                            <td>Aug 31 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                          <tr> 
                                            <th scope="row">17370540</th> 
                                            <td>Pixel Pro Premium Bootstrap UI Kit</td> 
                                            <td>jacob.monroe@company.com</td> 
                                            <td>$153.11</td> 
                                            <td>Aug 28 2020</td> 
                                            <td><a href="#" class="btn btn-sm btn-primary">View</a></td> 
                                          </tr> 
                                        </tbody> 
                                      </table> 
                                </div> 
                                <a href="#" class="btn btn-block btn-light">View all</a> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-12 col-xl-4"> 
                        <div class="card"> 
                            <h5 class="card-header">Traffic last 6 months</h5> 
                            <div class="card-body" style="max-width:500px; height:410px"> 
                              <div id="chartDataID"> 
                                {% include 'console_app/chartData.html' %} 
                              </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                <footer class="pt-5 d-flex justify-content-between"> 
                    <!-- <span>Copyright © 2019-2020 <a href="https://themesberg.com">Themesberg</a></span> --> 
                    <ul class="nav m-0"> 
                        <li class="nav-item"> 
                          <a class="nav-link text-secondary" aria-current="page" href="#">Privacy Policy</a> 
                        </li> 
                        <li class="nav-item"> 
                          <a class="nav-link text-secondary" href="#">Terms and conditions</a> 
                        </li> 
                        <li class="nav-item"> 
                          <a class="nav-link text-secondary" href="#">Contact</a> 
                        </li> 
                      </ul> 
                </footer> 
            </main> 
        </div> 
    </div> 
    
    <!-- Github buttons --> 
    <script async defer src="https://buttons.github.io/buttons.js"></script> 
    
      {% block js_script %} 
      <script> 
          document.body.addEventListener('htmx:configRequest', (event) => { 
              event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'; 
          }) 
      </script> 
      {% endblock %} 
    
 {% endblock %}