<nav class="navbar navbar-expand-lg navbar-light bg-light mynav">
  <div class="container">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-wrap" id="navbarSupportedContent">
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            About
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action 1</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <li><a class="dropdown-item" href="#">Action 2</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services in detail
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
            <li><a class="dropdown-item" href="#">Action 3</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Destination
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown4">
            <li><a class="dropdown-item" href="#">Action 4</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <ul class=" navbar-nav mb-2 mb-lg-0 rightnav">
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Restricted Content</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Membership</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Health</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row mt-2 ">
    <!-- left col -->
    <div class="col-md-4">
      <div class="card bg-light">
        <div class="card-body text-center">
          <img src="https://picsum.photos/246/205" class="rounded-circle mb-3" alt="" width="246" height="205">
          <h3 class="card-title p-2"> Jane Doe</h3>
          <!-- description -->
          <p class="card-text m-2">
            <span> Description</span><br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex, natus sunt voluptatum eveniet nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex, natus sunt voluptatum eveniet nulla.
          </p>
          <!--- social media buttons -->
          <a href="#"><i class="bi bi-twitter text-dark mx-1"></i></a>
          <a href="#"><i class="bi bi-facebook text-dark mx-1"></i></a>
          <a href="#"><i class="bi bi-instagram text-dark mx-1"></i></a>
        </div>
      </div>
    </div> <!-- END of first col -->
    <!-- right col -->
    <div class="col-md-8">
      <h2>Some sort of Heading here</h2>
    </div><!-- END card -->

  </div><!-- END row -->
</div>
.mynav li a {
  white-space: nowrap;
}
.mynav li {
  margin-right: 1rem;
}

.card-body img.rounded-circle {
  max-width: 100%;
  height: auto;
}
/* forum question answer only 
https://www.sitepoint.com/community/t/navigation-overflow-then-container/434446

Requires bootstrap5 JS and css styles

*/
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js