[FIXED] Nav sidebar overriding next column content

Issue

I have a sidebar that appears at load as expected, but it override its container column and overflow on the next section column.

I make the sidebar sticky at load with the .active-nav from the css file, but it overflows its sizing, without the active-nav the sidebar doesn't show at load but I don't have positioning issue...

this is the HTML portion:

{% extends "base.html" %}
{% block content %}

<!-- Sidebar section -->
<nav class="navbar active-nav navbar-expand d-flex flex-column align-item-start" id="sidebar">
  <div class="p-4 pt-5">

<!-- User image -->
  <div class="text-center">
    <img src="{{url_for('static',filename='profile_pics/two.jpg')}}" class="rounded" alt="Profile">
  </div>

 <!-- Navbar menus -->
  <ul class="navbar-nav d-flex flex-column mt-5 w-100">
      <li class="nav-item dropdown w-100">
        <a href="#equitiesSubmenu" class="nav-link dropdown-toggle text-light pl-4" id="equitiesSubmenu" role="button" data-bs-toggle="collapse" aria-expanded="true">Equities</a>
        <ul class="collapse lisst-unstyled" id="equitiesSubmenu">
            <li><a href="{{url_for('core.simulator')}}" class="dropdown-item text-light pl-4 p-2">Simulator</a></li>
            <li><a href="{{url_for('core.portfolio')}}" class="dropdown-item active text-light pl-4 p-2">Portfolio</a></li>
        </ul>
      </li>       
  </ul>

  <br>
  <div class="footer">
      <p>
          Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="icon-heart" aria-hidden="true"></i> by <a href="#" target="_blank">#</a>
      </p>
  </div>

</nav>

<!-- Container for the body page -->
  <section class="my-container">
   Lorem Ipsum
  </section>

this is the css portion:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: #fff;
}

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    margin-left: -300px;
    background-color: #212529;
    transition: 0.4s;
}

.nav-link {
    font-size: 1.25em;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: #c0c2c5;
}

.dropdown-menu {
    background-color: #be1ca9;
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #a81219;
}

.my-container {
    transition: 0.4s;
}


/* for navbar */

.active-nav {
    margin-left: 0;
}


/* for main section */

.active-cont {
    margin-left: 250px;
}

.footer p {
    color: rgba(255, 255, 255, 0.5); }

How to fix the positioning overflowing from its container as shown in this screenshot?

Solution

Update this two class properties as like my follow code:

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    background-color: #212529;
    transition: 0.4s;
}

.my-container {
    transition: 0.4s;
    margin-left: 250px;
}

Answered By - Enamul Kabir