Fixing a left leaning navbar - html

Question

I'm making a website for a school club for my first starter front-end project and I've been using the bootstrap library for CSS. I've ran into a bit of a problem though, my navbar isn't centred horizontally and more so leans to the left. I wanted the title and icon all to the left then the list items on the other side of the container so I played around with margins but it never really worked out. Thank you for helping.
<nav class="navbar navbar-expand-lg ">
<div class="container">
<a class="navbar-title" href="home.html">Title</span>
<img class="navbar-brand" src="https://i.imgur.com/qRujsE0.jpg"></img>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-btarget="#navmenu">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
<li class="nav-item">Join Us</li>
</ul>
</div>
</div>
</nav>

Answer 1

First, I suggest to specify a width and a height to your image. Then, you have to use the class ".ms-auto" to get the navigation aligned on the right as per Boostrap documentation. You could have also used Bootstrap flexbox with the class ".justify-content-between".
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://i.imgur.com/qRujsE0.jpg" width="30" height="30" class="d-inline-block align-top" alt="" />
Title
</a>
<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="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
<li class="nav-item">Join Us</li>
</ul>
</div>
</div>
</nav>