Bootstrap 4 引导导航栏项无法正确对齐

嗨，我在修理导航条时遇到了麻烦，这样它就均匀了，这样一个项目就不会占用太多空间

<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
  <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">My Name</a>
    <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
       <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#page-top">Over mij</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Persoonlijke ontwikkeling</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">Curriculum vitae</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
        </li>
        <li class="nav-item mx-0 mx-lg-1">
          <a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="indexEN.html">English</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

菜单

以及它现在的样子： 以及它的外观：

---

，欢迎任何帮助

您必须根据需要进行调整。我去掉了填充物。它现在正按照您的预期工作

.container{
右边填充：0；
左侧填充：0；
}

菜单

或使用

px-0

类感谢它修复了部分问题，仍然有问题的导航是在顶部，而不是悬停模式，这是我试图解决它与你给我的。但为什么这两种情况都不适用呢？我发现这一个项目列表必须没有填充，这让我很恼火，否则会给整个导航栏带来问题……如果你对如何解决这个问题有任何想法，请告诉我。大部分问题都已经解决了。好吧，我想不再需要了，我不知怎么地通过牺牲一些像素来修复它，即使在每个项目列表上也一样！