Html 导航栏项目不显示

我试图在我的应用程序中使用边界元法，所以我开始使用导航栏，但我遇到了问题，我的导航项目没有显示，而汉堡包图标显示在桌面版本中，这是错误的

这是我的密码

HTML

更新链接正在运行

这是我的书

---

我的代码有什么问题？我只是一个新手，所以如果您发现任何错误，请随时更正我的代码，或者提供一个工作示例来简化事情。谢谢

我不确定BEM方法，但是我检查了，如果您最初使用Bootstrap中的类：“navbar collapse”、“navbar”、“navbar nav”，效果会更好

.main导航{
背景颜色：绿色；
位置：固定；
排名：0；
左：0；
显示器：flex；
证明内容：柔性端；
对齐项目：拉伸；
高度：50px；
宽度：100%；
&__项目{
填充：0.2em；
背景色：#088887；
显示器：flex；
对齐项目：居中；
}
&__链接{
列表样式类型：无；
列表样式：无；
}

JSFIDLE不工作？链接到JSFIDLE网站主页：）hii@Rustyjim我已经更新了链接我解决了这个问题，我有css的问题，你的引导程序工作得更好，但我只是想使用bem，这就是我现在拥有的。很高兴听到你自己修复了它！

<nav class="main-nav">
    <div class="main-nav__logo">
      <li class="main-nav__link">
        <a>Majeni</a>
      </li>
    </div>
    <button class="main-nav__toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="main-nav__icon navbar-toggler-icon"></span>
    </button>
    <div class="main-nav__collapse collapse" id="navbarNav">
      <ul class="main-nav__list ml-auto">
        <li class="main-nav__item--active">
          <a class="main-nav__link" href="#">Home
            <span class="main-nav__current sr-only">(current)</span>
          </a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">About us</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link" href="#">What we do</a>
        </li>
        <li class="main-nav__item">
          <a class="main-nav__link " href="#">Projects</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link " href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>

.main-nav {
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: 50px;
    width: 100%;
    &__item{
            padding: 0 2em;
            background-color: #088887;
            display: flex ;
            align-items: center;
        }
    &__link{
        list-style-type: none;
        list-style: none;
    }