FreeCodeCamp产品着陆页项目求助：#nav-bar与#nav-link校验失败

1. #nav-bar 未固定在视口顶部的问题 #

代码中#nav-bar虽位于HTML结构最上方，但默认是文档流元素，滚动页面时会随内容移动。需通过CSS设置固定定位，确保它始终停留在视口顶部：

#nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 添加背景色避免下方内容透过导航栏显示 */
  padding: 1rem;
  box-sizing: border-box; /* 确保内边距不会撑宽导航栏 */
}

同时，为避免页面内容被固定导航栏遮挡，需给页面主体添加顶部内边距：

body {
  padding-top: 80px; /* 数值根据导航栏实际高度调整 */
}

2. nav-link 元素缺少 href 属性的问题 #

你的代码存在两处不符合规范的写法：

• nav-link类被错误添加在<li>标签上，而<li>本身不支持href属性，属于无效HTML；
• 你将href属性放在了<li>上，正确的做法是将nav-link类和href属性都放在内部的<a>标签上。

修复后的HTML代码片段：

<header id="header">
  <nav id="nav-bar">
    <ul>
      <li id="flute-category-c"><a class="nav-link" href="#c-flutes">C Flutes</a></li>
      <li id="flute-category-piccolo"><a class="nav-link" href="#piccolo-flutes">Piccolos</a></li>
      <li id="flute-category-alto"><a class="nav-link" href="#alto-flutes">Alto Flutes</a></li>
      <li id="flute-category-bass"><a class="nav-link" href="#bass-flutes">Bass Flutes</a></li>
      <li id="flute-category-contra-alto"><a class="nav-link" href="#contra-alto-flutes">Contra-Alto Flutes</a></li>
      <li id="flute-category-contrabass"><a class="nav-link" href="#contrabass-flutes">Contrabass Flutes</a></li>
    </ul>
  </nav>
</header>

额外提示： #

所有元素的id必须唯一，你之前的代码中所有<li>都使用了相同的id="flute-category"，这会导致HTML结构无效，建议修改为唯一id（如示例中的写法）。

内容的提问来源于stack exchange，提问作者Shiyul Choi