Here is the Navigation Bar that I customized, along with the CSS code I used to override the Bootstrap styling. Below are images showing the current output and the expected output.
<div class="row fixed-top">
<div class="col-md-1"></div>
<div class="col-md-10 padding">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<span class="navbar-brand" >MySite</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain"
aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarMain">
<div class="navbar-nav float-lg-right">
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" ref="#services">Services</a>
<a class="nav-item nav-link" href="#ourwork">Our Work</a>
<a class="nav-item nav-link" href="#about">About Us</a>
<a class="nav-item nav-link"href="#contact">ContactUs</a>
</div>
</div>
</nav>
</div>
<div class="col-md-1"></div>
</div>
The CSS code I applied:
nav a:hover{
background-color: green;
text-decoration: none;
margin: 0 0 0 0 !important;
}
nav a:focus{
color: black;
}
.collapse{
margin: 0;
}
Current Output Image:
Expected Output Image: