导航栏挑战

Question

编码游戏的新手。

如何更改从Bootstrap提取的导航栏中的字体和颜色。我在CSS中定位了NavBar，.nav-bar，nav-item，nav-link，但是颜色仍然没有改变。我在HTML中摆脱了navbar-light，但随后摆脱了切换折叠按钮（汉堡标志）。我希望在窗口最小化时保留汉堡标志，并且在我的导航栏品牌和导航链接中将颜色更改为红色。请帮助。

这是我的HTML：

 <a class="navbar-brand" href="">MiNed</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse"
  data-target="#data" aria-controls="navbarSupportedContent"
  aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="data">
  <ul class="navbar-nav ml-auto">
   <li class="nav-item">
     <a class="nav-link" href="">Contact</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="">About Us</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="">Work</a>
      </li>
     </ul>
   </div>
</nav> 

CSS：

.navbar {
    color: red;
    padding: 0 0 4.5rem;
}

.navbar-brand {
    font-family: 'Ubuntu';
    font-size: 2.5rem;
    font-weight: bolder;
    color: #ff0000;
    padding: 0;
}

.nav-item {
    color: red;
    padding: 0 14px;
}

.nav-link {
    font-family: 'Montserrat-heavy';
    font-size: 2rem;
    color: red;
    padding-left: 0;
}