title: How to left-justify some Bootstrap nav content and right-justify other content?
body: <p>I have a Bootstrap 5.x navbar with the following code:</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-custom navbar-dark fixed-top&quot;&gt;
          &lt;div class=&quot;container-fluid px-5&quot;&gt;
              &lt;a class=&quot;navbar-brand&quot; href=&quot;../main.aspx&quot;&gt;
                  &lt;img src=&quot;../images/mainlogo_150x136.jpg&quot; class=&quot;d-inline-block align-text-middle&quot;&gt;
              &lt;/a&gt;
              &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
                  &lt;ul class=&quot;navbar-nav mr-auto mb-2 mb-sm-0&quot;&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/main.aspx&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/directory.aspx&quot;&gt;Directory&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/notices.aspx&quot;&gt;Notices&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/events.aspx&quot;&gt;Upcoming Events&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/members/messages.aspx&quot;&gt;Message Center&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/aboutus.aspx&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class=&quot;navbar-nav mb-2 mb-sm-0&quot;&gt;
                      &lt;% if ( HttpContext.Current.User.Identity.IsAuthenticated ) {  %&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/members/signout.aspx&quot;&gt;Logout&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/members/myaccount.aspx&quot;&gt;Account&lt;/a&gt;&lt;/li&gt; 
                      &lt;% }   
                         else {%&gt;  
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/signin.aspx&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
                          &lt;li ckass=&quot;nav-item&quot;&gt;&lt;a class=&quot;nav-link&quot; runat=&quot;server&quot; href=&quot;~/register.aspx&quot;&gt;Register&lt;/a&gt;&lt;/li&gt; 
                      &lt;%} %&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>I am having trouble figuring out how to left-justify the main page links and, at the same time, right-justify the signin/signout and register/account links.  I have tried a number of  solutions I found on SO but nothing seems to work right.
  Can anyone help me fix this?</p>