如何修复Bootstrap导航栏间距？实现全屏宽度与居中均匀分布

先修正HTML结构错误 #

原代码存在多处语法问题（多余引号、标签嵌套混乱、混入无关代码），先修复这些基础问题：

<body>
<section class="header">
  <!-- 移除导致留白的container和row，避免自带左右内边距 -->
  <nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#">MAD</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
      <ul class="navbar-nav w-100 justify-content-around">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Book a Service</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Shop</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

<section class="masthead">
</section>
</body>

调整CSS实现需求 #

修改后的CSS如下，关键改动已标注：

.masthead {
  height: 25vh;
  min-height: 500px;
  background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* NAVBAR */
.navbar {
  background-color: #000000;
  /* 消除导航栏自身的左右内边距 */
  padding-left: 0;
  padding-right: 0;
}

/* 给导航项添加合适间距，避免过于紧凑 */
.nav-item {
  padding: 0 1rem;
}

关键改动说明 #

1. 消除左右留白：移除原代码中包裹导航栏的container和row（这两个类自带左右内边距），同时给.navbar清除左右内边距，确保导航栏全屏无留白。
2. 导航链接居中：给折叠容器collapse.navbar-collapse添加justify-content-center类，让导航内容整体居中。
3. 链接均匀分布：给.navbar-nav添加w-100（占满可用宽度）和justify-content-around类，实现导航项在水平方向均匀分布；如果需要每个项宽度完全一致，可换成justify-content-evenly。

内容的提问来源于stack exchange，提问作者Morgan Clark