Centering a bootstrap 4 navbar (mega menu)

in bootstrap4 I think:

https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

I am trying to get my mega menu centered, I had this:

<nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="mainNav">
  ...

Then according to this:

https://getbootstrap.com/docs/4.0/components/navbar/

I had to add a div container to center it. S I was able to center it by the code:

  <nav class="navbar navbar-light bg-light navbar-expand-lg sticky-top" id="myNavbar">
    <div class="container"> <!-- centering nav bar container -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="mainNav">
  ...

That worked, it centered! And since I put the div container the line after class navbar, the bar extends the width of the screen....responsively acts correctly too. I just cannot figure out why the padding is off between elements, the carets look off in the centered menu. (not to the right of the txt) anymore...not sure where else to change to fix that. The full boot strap structure of the menu is:

  <nav class="navbar navbar-light bg-light navbar-expand-xl sticky-top" id="myNavbar">
    <div class="container"> <!-- centering nav bar container -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse" id="mainNav">
    <ul class="navbar-nav ml-auto nav-fill">
      <li class="nav-item px-4 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i -->
          About</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
            <div class="d-md-flex align-items-start justify-content-start">
              <div>
                <div class="dropdown-header">About US</div>
                <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a>
                <etc...></etc...>
              </div>
            </div>
        </div>
      </li>
      <li class="nav-item px-4 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i -->
          About</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
            <div class="d-md-flex align-items-start justify-content-start">
              <div>
                <div class="dropdown-header">About US</div>
                <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a>
                <etc...></etc...>
              </div>
            </div>
        </div>
      </li>
      <li class="nav-item px-4 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- i class="fa-solid fa-circle-info"></i -->
          About</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown">
            <div class="d-md-flex align-items-start justify-content-start">
              <div>
                <div class="dropdown-header">About US</div>
                <a class="dropdown-item" href="{% url 'mainpage:siteuserguide' %}">Site User's Guide</a>
                <etc...></etc...>
              </div>
            </div>
        </div>
      </li>
    </ul>
  </div>
  </nav>
  </div> <!-- end centering container -->

Pictures illustrating the correct looking menu items but not centered, followed by the correctly centered navbar b ut not correct items (no padding in between, just needs a smidge for the caret)

In your code, you were using the ml-auto class on the <ul> element, which applies margin-left: auto. To center the content horizontally, I changed it to mx-auto, which applies margin horizontally on both sides (margin-left: auto; margin-right: auto).

Your original code classes: navbar-nav ml-auto nav-fill

Updated Code classes: navbar-nav mx-auto nav-fill