title: Bootstrap4: mega menu not staying centered when adding more items in the navigation
body: <p>I found some Bootstrap mega menu code online and it works well except the mega menu will not stay centered. It keeps floating to the left of the screen. Here is the original code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-light bg-light navbar-expand-lg" id="myNavbar"&gt;
  
   &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
   &lt;/button&gt;
  
   &lt;a href="#" class="navbar-brand"&gt;Navbar Brand&lt;/a&gt;
   &lt;div class="collapse navbar-collapse" id="mainNav"&gt;
    &lt;ul class="navbar-nav ml-auto nav-fill"&gt;
  
     &lt;li class="nav-item px-4"&gt;
      &lt;a href="#" class="nav-link"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
     &lt;/li&gt;
  
     &lt;li class="nav-item px-4 dropdown"&gt;
      &lt;a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Services&lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="servicesDropdown"&gt;
       &lt;a class="dropdown-item" href="#"&gt;What we do&lt;/a&gt;
       &lt;a class="dropdown-item" href="#"&gt;How we fit your needs&lt;/a&gt;
       &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
       &lt;div class="d-md-flex align-items-start justify-content-start"&gt;
        &lt;div&gt;   
         &lt;div class="dropdown-header"&gt;Development&lt;/div&gt;
         &lt;a class="dropdown-item" href="#"&gt;Bespoke software&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Mobile apps&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Websites&lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
         &lt;div class="dropdown-header"&gt;Professional Services&lt;/div&gt;
         &lt;a class="dropdown-item" href="#"&gt;Project rescue&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Source code recovery&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Application support &amp;amp; maintenance&lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
         &lt;div class="dropdown-header"&gt;Fixed Price Services&lt;/div&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add cookie consent&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add captcha&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add core data&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Custom error pages&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Contact form creation&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Automated backups&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Image to HTML&lt;/a&gt;
        &lt;/div&gt;
             &lt;div&gt;
         &lt;div class="dropdown-header"&gt;Fixed Price Services&lt;/div&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add cookie consent&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add captcha&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add core data&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Custom error pages&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Contact form creation&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Automated backups&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Image to HTML&lt;/a&gt;
        &lt;/div&gt;
             &lt;div&gt;
         &lt;div class="dropdown-header"&gt;Fixed Price Services&lt;/div&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add cookie consent&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add captcha&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Add core data&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Custom error pages&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Contact form creation&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Automated backups&lt;/a&gt;
         &lt;a class="dropdown-item" href="#"&gt;Image to HTML&lt;/a&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/li&gt;
     &lt;li class="nav-item px-4"&gt;
      &lt;a href="#" class="nav-link"&gt;Contact&lt;/a&gt;
     &lt;/li&gt;
     &lt;li class="nav-item px-4"&gt;
      &lt;a href="#" class="nav-link"&gt;Blog&lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It stays centered if there are only 3 parent items, but not the 5 I need. Can someone help? I'm tried looking for solutions online to no avail.</p>