title: Bootstrap nav mr-auto not working as expected
body: <p>I have the bootstrap nav snippet below:</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;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;nav class="navbar bg-secondary navbar-dark"&gt;
    &lt;div class="container"&gt;
      &lt;nav class="navbar navbar-expand-lg"&gt;&lt;a class="navbar-brand text-white" href="/"&gt;Test Site 2&lt;/a&gt;&lt;button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;div class="collapse navbar-collapse d-flex" id="navbarMain"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item dropdown"&gt;&lt;a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;View Categories&lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                &lt;div class="container container-sm"&gt;
                  &lt;div class="row"&gt;
                    &lt;a class="dropdown-item" href="/categories/5cfe472022a68840484a3652" style="white-space: normal;"&gt;Category 1&lt;/a&gt;&lt;a class="dropdown-item" href="/categories/5dc7ff6bac641e2548a9e279" style="white-space: normal;"&gt;Category 2&lt;/a&gt;&lt;a class="dropdown-item" href="/categories/5dc7ffa1ac641e2548a9e27a" style="white-space: normal;"&gt;Category 3&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="/pages/about-us"&gt;About Us&lt;/a&gt;&lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="/pages/contact-us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="/pages/finding-us"&gt;Finding Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="navbar-nav"&gt;
            &lt;li class="nav-item mr-2"&gt;
              &lt;form class="form-inline" method="get" action="/search"&gt;
                &lt;div class="input-group input-group-sm mt-1"&gt;&lt;input class="form-control" type="search" placeholder="Search..." name="term"&gt;
                  &lt;div class="input-group-append"&gt;&lt;button class="btn btn-success" type="submit"&gt;Go&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="/login"&gt;Login / Register&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have copied their example on the bootstrap documentation site where possible.</p>
  
  <p>I want to get the second <code>&lt;ul&gt;</code> pushed to the right so am using <code>mr-auto</code> as they do in their example however it's not working for me like it is in the example, I don't understand why. I even tried adding the class <code>d-flex</code> to the <code>#navbarMain</code> div but still no luck.</p>
  
  <p>Even running through the values in the inspector shows everything the same as in the example as far as I can see.</p>
  
  <p>Can someone tell me why this isn't working?</p>