Nav bar misalignment between logo and text - html

Question

I'm trying to create navbar at the top that sticks as one scrolls but is having difficulty trying to use bootstrap. My logo and the other text are not aligned.
HTML using bootstrap:
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end style="background-color: #e7a412;">
<div class="container-fluid">
<!-- Mos logo -->
<div><a class="navbar-brand ms-lg-3" href="#">
<img src="images/mos_logo.png" alt=""></div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation">
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text">
</span>
</div>
</div>
</nav>
But my text is not aligned to logo:
enter image description here

Answer 1

the code <a class="navbar-brand ms-lg-3" href="#"></a> under <li> tag take its space so logo and other text are not align. I guess you duplicated it incorrectly?
Also, I found that there are some missing syntax and closing tags with your code. Please take the below code for your reference.
Missing a " for <nav>'s class.
Missing closing </a> for the logo div.
A extra closing tag</button>.
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end" style="background-color: #e7a412">
<div class="container-fluid">
<!-- Mos logo -->
<div>
<a class="navbar-brand ms-lg-3" href="#"> <img src="images/mos_logo.png" alt="" /></a>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text"> </span>
</div>
</div>
</nav>