为什么导航栏列表不在右侧？

Question

I am having an issue when I remove navbar toggler button and div navbar collapse my whole navbar elements are on the right the way i want them to be, but that div navbar collapse is their to make navbar responsive to look navbar good, my whole nav lists go on the side of my brand logo. Please help me how do i fix? and I am using bootstrap.

HTML/Bootstrap:

    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-toggle="affix" >
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
            </div>
    
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse " id="navbarNav"> 
    
            <ul class="navbar navbar-nav ">
                <li class="nav-item p-3"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Members</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Membership</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">About Us</a></li>
                <li class="nav-item p-3"><a class="nav-link" href="#">Contact Us</a></li>
                
            </ul>
             </div> 
        </div>
    </nav> 

CSS:

*{ 
    padding: 0; 
    margin: 0; 
} 

nav { 
    letter-spacing: 4px; 
    font-family: 'Metal Mania', cursive; 
} 

.navbar {
    -webkit-transition:padding 0.2s ease; 
    -moz-transition:padding 0.2s ease; 
    -o-transition:padding 0.2s ease; 
    transition:padding 0.2s ease; } 

.affix { 
    padding-top: 0.2em !important; 
    padding-bottom: 0.2em !important; 
    -webkit-transition:padding 0.2s linear; 
    -moz-transition:padding 0.2s linear; 
    -o-transition:padding 0.2s linear; 
    transition:padding 0.2s linear; 
} 

Answer 1

Remove .collapse class from div

<div class="navbar-collapse " id="navbarNav">

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-toggle="affix" > <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse " id="navbarNav"> <ul class="navbar navbar-nav "> <li class="nav-item p-3"><a class="nav-link" href="#">Home</a></li> <li class="nav-item p-3"><a class="nav-link" href="#">Members</a></li> <li class="nav-item p-3"><a class="nav-link" href="#">Membership</a></li> <li class="nav-item p-3"><a class="nav-link" href="#">About Us</a></li> <li class="nav-item p-3"><a class="nav-link" href="#">Contact Us</a></li> </ul> </div> </div> </nav>

Answer 2

Issue Fixed. Fixed my issue by giving ml-auto to ul. Thanks Everyone who tried to answwer