Having trouble aligning images in navbar with bootstrap. Tried various solutions without success. Here is my code snippet and image of my current page:
<body>
<header id="header" class="fixed-top">
<nav class="navbar navbar-expand-lg bg-img navigation-wrap">
<div class="container">
<div class="logo lahore">
<a class="navbar-brand" href="#"><img src="img/TOL <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93dffcf4fcbed1fff2f0f8d3a1ebbde3fdf4">[email protected]</a>"></a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#services"><img
src="img/navbar/SERVICES.png"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lahore"><img src="img/navbar/LAHORE.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu"><img src="img/navbar/JOIN OUR
TEAM.png"></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact_us"><img src="img/navbar/CONTACT
US.png"></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
view screenshot here - showing my current code layout
Below attached another page how it's supposed to look like.
view correct image layout here
Can someone advise on what I might be doing wrong?