title: how to set navigation bar to the left using bootstrap?
body: <p>I am trying to create a navigation bar for my website using bootstrap 5. The problem is I want to make my bar move to the left by using the class margin left auto (ml-auto). I do not know exactly why it did not work for me. Could you help me to figure out the reason, please? Thank you so much!</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;title&gt;Kim Phan&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;body&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt; &lt;!-- make the nav bar size, nav bar font color, navbar background color--&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;&quot;&gt;tindog&lt;/a&gt; &lt;!--brand color logo--&gt;
          &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt; 
                  &lt;a class=&quot;nav-link&quot;href=&quot;&quot;&gt; Contact&lt;/a&gt;
               &lt;/li&gt;
               &lt;li class=&quot;nav-item&quot;&gt; 
                  &lt;a class=&quot;nav-link&quot;href=&quot;&quot;&gt; Pricing&lt;/a&gt;
               &lt;/li&gt;
               &lt;li class=&quot;nav-item&quot;&gt; 
                  &lt;a class=&quot;nav-link&quot;href=&quot;&quot;&gt; Download&lt;/a&gt;
               &lt;/li&gt;
          &lt;/ul&gt;
          
      &lt;/nav&gt;
  &lt;/body&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/f0bs7.png" rel="nofollow noreferrer">My current navigation bar image</a></p>