Html 如何将元素放置在导航栏中？

我导航栏的元素似乎被卡在了它的外面。我不知道为什么

这是我的密码：

菜单

.nav a{
颜色：白色！重要；
字体大小：20px；
}
.navbar品牌{
颜色：白色！重要；
字体大小：20px；
字体系列：无衬线；
}

下面是导航栏的外观：

有人知道如何解决这个问题吗？（菜单图标是否有白色背景且为黑色，而显微镜图标有不可见背景且为白色？）

---

谢谢

您在开始时关闭导航栏，因此从第一行中删除

标记。 删除第二行，这里不需要代码。 为“保护”和“关于菜单”指定“导航链接”类

菜单

css代码在哪里？@AymanMorsy抱歉，已更新。嗨！谢谢，我如何使导航栏仅在用户使用手机时显示？

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