Html 如何使导航栏更加突出？

我的页面上有一个导航栏，但由于某些原因，只有“主页”链接是纯白色的。其余的链接没有那么明亮。我试图创建一个以图片为背景的透明导航栏。我已经设法做到了，但是“主页”链接比其他链接更加明亮和突出。如下图所示：

---

这是因为

活动的
类
是在围绕它的
li
中定义的，就像
一样。将
活动
类
添加到其同级，它应该可以工作

      <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>

.nav-item:last-child{ 
    padding-right: 10.5em;

}
.nav-item{  
    padding: 0.9em;
    color: white;
    font-size: 17px;

}
.navbar-brand{  
    padding-left: 8em;
}