title: Mr-auto in navbar with divs
body: <p>I would like to split my navbar into left and right navbars. After looking at the bootstrap examples I thought mr-auto is exactly what I would need, however it doesn't work as desired when I use a container <strong>inside</strong> of the navbar. However I want to use the container element inside of the navbar as I am applying a background color for the full width navbar.</p>
  
  <p><strong>My HTML code:</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-grey navbar-expand-lg"&gt;
     &lt;div class="container"&gt;
        &lt;a class="navbar-brand" href="/"&gt;&lt;img class="rounded logo" src="http://www.m2kindia.com/wp-content/uploads/2016/07/dummy-logo.png"&gt;&lt;/a&gt;&lt;button class="navbar-toggler"&gt;&lt;/button&gt;
        &lt;div class="d-flex" id="navbar-menu"&gt;
           &lt;div class="mr-auto" id="navbar-menu-left-side"&gt;
              &lt;ul class="navbar-nav"&gt;
                 &lt;li class="nav-item"&gt;&lt;a class="nav-item nav-link" href="/"&gt;Home1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
           &lt;div class="collapse navbar-collapse" id="navbar-menu-right-side"&gt;
              &lt;ul class="nav navbar-nav action-links"&gt;
                 &lt;li class="nav-item"&gt;&lt;a class="nav-item nav-link" href="/"&gt;Home2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/bvzvo05d/7/" rel="nofollow noreferrer">https://jsfiddle.net/bvzvo05d/7/</a></p>
  
  <p>Edit: Updated JSFiddle, take note that Home2 is a collapsing item, viewport must be enlarged in JSFiddle to see that item.</p>
  
  <p><strong>Desired result:</strong></p>
  
  <p>The div showing the Home1 link should be placed on the left and the Home2 div should be right aligned.</p>