I am currently using bootstrap to develop a webpage. I have a navigation bar at the top of the page and I would like my navbar-brand to be positioned on the right side, while my navbar links should be on the left. However, when I try to implement this, it causes the navbar links to be displaced downwards, resulting in the navbar and navbar-brand not being aligned properly (as illustrated below).
https://i.sstatic.net/q7FoR.png
Below is my HTML code:
<nav class="navbar navbar-expand-lg navbar-dark" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav mr-auto" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>Below is my CSS code:
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem; }
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0; }
.nav-item {
margin-bottom: -1px; }
nav #myNavbar li a {
float: right !important; }
.navbar-inverse {
border: none;
margin: 0;
background: transparent;
padding-left: 20px;
padding-bottom: 20px; }
.navbar-brand {
font-weight: 700;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
line-height: inherit;
white-space: nowrap;
display: inline-block; }
#mainNav .navbar-nav .nav-item .nav-link {
font-weight: 700;
font-size: 0.9rem;
display: inline-block; }Any suggestions on how to resolve this issue?