title: How to align nav items to the right in Bootstrap 5?
body: <p>I have copied a navbar HTML code from <a href="https://www.codeply.com/go/qhaBrcWp3v" rel="noreferrer">https://www.codeply.com/go/qhaBrcWp3v</a></p>
  <p>Example 6:</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
  &lt;div class=&quot;d-flex flex-grow-1&quot;&gt;
      &lt;span class=&quot;w-100 d-lg-none d-block&quot;&gt;&lt;!-- hidden spacer to center brand on mobile --&gt;&lt;/span&gt;
      &lt;a class=&quot;navbar-brand d-none d-lg-inline-block&quot; href=&quot;#&quot;&gt;
          Navbar 6
      &lt;/a&gt;
      &lt;a class=&quot;navbar-brand-two mx-auto d-lg-none d-inline-block&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;//placehold.it/40?text=LOGO&quot; alt=&quot;logo&quot;&gt;
      &lt;/a&gt;
      &lt;div class=&quot;w-100 text-right&quot;&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#myNavbar&quot;&gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;collapse navbar-collapse flex-grow-1 text-right&quot; id=&quot;myNavbar&quot;&gt;
      &lt;ul class=&quot;navbar-nav ml-auto flex-nowrap&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item nav-active&quot;&gt;Our Solution&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;How We Help&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;Bdfdsfslog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code keeps the nav items to right but when I paste it and run my HTML code it doesn't work and all items are in the left place</p>
  <p>here is my index.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Website Template&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; 
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1&quot; crossorigin=&quot;anonymous&quot;&gt;
          &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js&quot; 
              integrity=&quot;sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body data-spy=&quot;scroll&quot; data-target=&quot;#navbarResponsive&quot;&gt;
      &lt;div id=&quot;home&quot;&gt;&lt;/div&gt;
      &lt;!-- NAVIGATION --&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
          &lt;div class=&quot;d-flex flex-grow-1&quot;&gt;
              &lt;span class=&quot;w-100 d-lg-none d-block&quot;&gt;&lt;!-- hidden spacer to center brand on mobile --&gt;&lt;/span&gt;
              &lt;a class=&quot;navbar-brand d-none d-lg-inline-block&quot; href=&quot;#&quot;&gt;
                  Navbar 6
              &lt;/a&gt;
              &lt;a class=&quot;navbar-brand-two mx-auto d-lg-none d-inline-block&quot; href=&quot;#&quot;&gt;
                  &lt;img src=&quot;//placehold.it/40?text=LOGO&quot; alt=&quot;logo&quot;&gt;
              &lt;/a&gt;
              &lt;div class=&quot;w-100 text-right&quot;&gt;
                  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#myNavbar&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;collapse navbar-collapse flex-grow-1 text-right&quot; id=&quot;myNavbar&quot;&gt;
              &lt;ul class=&quot;navbar-nav ml-auto flex-nowrap&quot;&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item nav-active&quot;&gt;Our Solution&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;How We Help&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;Blog&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-link m-2 menu-item&quot;&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- END OF NAVIGATION --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have tried <code>Navbar</code> code from <a href="https://getbootstrap.com/docs/5.0/components/navbar/" rel="noreferrer">https://getbootstrap.com/docs/5.0/components/navbar/</a> but I don't know how can I move nav items (<code>ml-auto</code> didn't work)</p>