Как я могу разместить свои элементы внутри моей панели навигации?

Question

Элементы моего navbar, похоже, застряли вне его. Я не уверен, почему?

Вот мой код:

<nav class="navbar navbar-expand-lg navbar-inverse"></nav>
    <div class="container-fluid">
      <div class="navbar-header">
        <a
          style="color: black; text-decoration: none; font-size: 2rem;"
          class="navbar-brand"
          href="#"
          >name<span class="fas fa-microscope fa-1x"></span
        ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="material-icons">menu</i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item"><a href="#">Protect</a></li>
          <li class="nav-item"><a href="#">About</a></li>
        </ul>
    </div>
  </nav>

.nav a{
  color: white !important;
  font-size: 20px;
}
.navbar-brand{
  color: white !important;
  font-size: 20px;
  font-family: sans-serif;
}

А вот как выглядит панель навигации:

веб-сайт

Кто-нибудь знает, как это исправить? (Кроме того, значок меню имеет белый фон и является черным, тогда как значок микроскопа имеет невидимый bg и белый цвет?)

Спасибо!

Answer 1

Вы закрываете панель навигации в начале, поэтому удалите тег </nav> из первой строки. Уберите 2-ю строку, здесь ненужный код. Назначьте класс "nav-link" для "Protect" и "About menu".

<nav class="navbar navbar-expand-lg navbar-inverse">
    <div class="navbar-header">
        <a
          style="color: black; text-decoration: none; font-size: 2rem;"
          class="navbar-brand"
          href="#">name<span class="fas fa-microscope fa-1x"></span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <i class="material-icons">menu</i>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
          <li class="nav-item"><a class="nav-link"  href="#">About</a></li>
        </ul>
    </div>
</nav>