How to make navbar more prominent? - html

Question

I have a navbar on my page but for some reason only the 'homepage' link is pure white. the rest of the links are not as bright. I am trying to create a transparent navbar with a picture as a background. i have managed to do that but the 'Home' link is considerably brighter and more prominent then the rest of the links. the image can be seen below:
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="#">
<i class="fas fa-mountain fa-2x mx-3"></i>Greatness</a> <!--This is the icon for the brand-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="indexHome.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">ABOUT US
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IDEAS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MOTIVATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
CSS
.nav-item:last-child{
padding-right: 10.5em;
}
.nav-item{
padding: 0.9em;
color: white;
font-size: 17px;
}
.navbar-brand{
padding-left: 8em;
}

Answer 1

It is because an active class is defined in the li which is wrapped around it, like <li class="nav-item active">. Add the active class to its siblings and it should work.