I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else that's causing this misalignment? Any assistance would be greatly appreciated! https://i.sstatic.net/9s2jA.jpg https://i.sstatic.net/vNiYG.jpg
<nav class="navbar navbar-expand-md">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#">
<img src="F:/Theme Development/New folder/facebook.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="F:/Theme Development/New folder/instagram.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="F:/Theme Development/New folder/linkdin.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
</a>
</li>
<li class="nav-item ">
<a href="#">
<img src="F:/Theme Development/New folder/twitter.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" style="background-color: #685dadfa;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
href="#">
<img src="F:/Theme Development/New folder/lock1.png" style="vertical-align:sub" /> REGISTER</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" style="margin-left:1rem;background-color: #179c95;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
href="#">
<img src="F:/Theme Development/New folder/sign_in.png" style="vertical-align:sub;" /> LOG IN</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:white">
<a class="navbar-brand mb-0 h1" style="font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" href="#">Website Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Post a Job</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Post Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
<!--/div-->
</nav>