Nav Bar Dropdown moves to the left side of screen when parent is clicked

Question

I have a nav bar with dropdowns that appear when hovered over. That part works perfectly. However if you click on the parent

or element the dropdown moves to the far left of the screen. I want it to just stay where it is even if this is clicked on. I'll include my html and css code below. Any help getting this element to stay where it is when the screen is expanded would be helpful. I am using bootstrap 5 by the way.

navbar.html

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="/">
    <img class="navbar-logo" src="{% static 'site_base/images/image.png' %}" alt="Logo">
  </a>
  <button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation"
    >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse text-end" id="main-navigation">
    <ul class="navbar-nav ms-auto d-flex justify-content-end">
      <li class="nav-item">
        <p class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Dropdown 1</p>
        <ul class="dropdown-menu text-end dropdown-menu">
          <li class="dropdown-item"><a href="who-we-serve/government">Sub-item-1</a></li>
          <li class="dropdown-item"><a href="#">Sub-item-2</a></li>
          <li class="dropdown-item"><a href="#">Sub-item-3</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
        <ul class="dropdown-menu text-end">
          <li class="dropdown-item"><a href="/mscore">Product 1</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Resources</a>
        <ul class="dropdown-menu text-end">
          <li class="dropdown-item"><a href="#">User Guides</a></li>
          <li class="dropdown-item"><a href="#">Videos</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/company">Company</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact-us">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

style.css

@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
  .navbar .nav-item:hover .nav-link {
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
}
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    margin-bottom: 0.5rem;
  }
}