各位好，我正在开发一个简单的商业网站，用HTML和CSS做了个顶部导航栏，但遇到了个小问题想请大家帮忙排查下。

先贴出我的实现代码和思路：

我的HTML结构 #

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="">Projects</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

对应的CSS样式 #

header nav ul {
  display: flex;
  list-style: none; /* 移除默认项目符号 */
}

/* 专门选中li标签，因为它是a标签的容器 */
header nav ul li {
  flex: 1; /* 让每个a标签占据相等的水平空间 */
}

我的设计逻辑是：用<header>包裹导航区域，里面的<nav>放无序列表，每个列表项对应一个导航链接。CSS里给header nav ul加display: flex让列表横向排列，同时去掉默认的项目符号；再给每个<li>设置flex: 1，想让四个导航链接平分整个水平宽度。

但实际运行后，用浏览器开发者工具查看页面时，发现**"About"链接的左侧有一块多余的、不需要的空白区域**。我反复检查了元素的样式和结构，还是没找到这个空白的来源。

附上问题截图：

有没有朋友遇到过类似的情况？麻烦帮我分析下这个空白是哪里来的，该怎么消除它？谢谢大家！