Why won't Navbar align to the right side in Bootstrap 5?-CodePudding

I want to get ONLY the "Account" navbar positioned on the far right-hand side but ms-auto does not seem to work as I want it to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Music Store!</title>
  </head>
    <body>
        <div >
            <nav >
              <div >
                <a  href="#">Website</a>
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                  <ul >
                    <li >
                      <a  aria-current="page" href="#">Home</a>
                    </li>
                    <li >
                      <a  href="about.php">About</a>
                    </li>
                    <li >
                      <a  href="contact.php">Contact</a>
                    </li>
                    
                    <?php
                    session_start();
                    if(isset($_SESSION['loggedIn']))
                        {
                        ?>
                          <li >
                            <a  href="viewStock.php">Shop</a>
                          </li>    

                          <ul >
                                <li >
                                    <a  role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
                                    <ul  aria-labelledby="navbarDropdown">
                                        <li><a  href="viewOrder.php">Order History</a></li>
                                        <li><a  href="viewListing.php">My Listings</a></li>
                                        <li><a  href="logout.php">Logout</a></li>
                                    </ul>
                                </li>
                            </ul>

                        <?php
                        }
                        else{
                        ?>
                          <ul >
           

                 <li >
                                    <a  role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
                                    <ul  aria-labelledby="navbarDropdown">
                                        <li><a  href="login.php">Login</a></li>
                                        <li><a  href="createUser.php">Register</a></li>
                                    </ul>
                                </li>
                            </ul>
                        <?php
                        }
                        ?>    
                    </ul>
                </div>
              </div>
            </nav>
        </div> <!-- End of container -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

CodePudding user response：

Add this to your css

.navbar-collapse{
  justify-content: end;
}

and remove the me-auto class from <ul >

and that should do the trick

Here is the fiddle https://jsfiddle.net/8zn9jkfs/