Cant align the unordered list out right using margin auto bu

Expected behavior*** Hi I am fairly new in learning coding, and now try to use bootstrap and html to build a website, I want have my unordered list separated with the logo and go far right on the screen, and in which most case I tried on codeply it work, but for some reasons, the list wont move at all when add more bootstrap elements in the code.

Actual behavior*** the code I am using originally to try to separated the list from the logo:

<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href=""> Tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

  <ul class="navbar-nav margin auto">
      <li class="nav-item">
          <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="">Download</a>
      </li>
  </ul></div>

So I ended up finding an answer to this issue from this forum, using "Justify-content-end" to fix the issue, it fixed it, but I would like to know the difference between these two, and why I cant use margin auto instead, is this sth in my code override margin auto function? **This is the answer I found in this forum, someone asked the similar question, and the staff Marcin Luczak commented it on it,

Hi @santozsunder@gmail.com,

In this case this might be the problem ml-auto was assigned to the element inside the collapsible container that itself sticks to the left of the navbar. Adding .justify-content-end to the collapse container does the job.

Keep coding, Marcin

So my question is this "collapsible container" affecting the margin auto function? and in what condition can I use "margin-auto" to separated the list from the logo? or as long as their is "navbar-collapse" in the line of the code, I should use "justify-content-end" instead of "margin-auto"? Can you help to clarify why it work this way?

Thank you, might be dumb question, but I really am struggling finding answer to my question from the internet for weeks.