头部left-links div存在多余空白，Flexbox布局问题求助

我正在完成Odin Project的Flexbox CSS练习，自检要求如下：

• 头部内所有元素与边缘有间距
• Logo垂直水平居中
• 列表项水平排列且在头部内垂直居中
• left-links和right-links分别贴靠头部左右边缘，页面缩放时保持位置
• 不使用floats、inline-block或absolute positioning

但class为left-links的div出现了未手动添加的多余空白，无法将其推至最左侧。
预期效果：头部左侧链接紧贴左边缘，右侧链接紧贴右边缘，Logo居中
实际效果：左侧链接与头部左边缘存在空白间距

相关代码：

CSS代码 #

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

.left-links a {
  align-items: left;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

问题根源是浏览器默认给<ul>标签添加了左侧内边距（padding-left），这就是你看到的空白来源。同时补充设置可满足所有自检要求，修改后的CSS代码如下：

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
  align-items: center; /* 让所有子元素垂直居中 */
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  padding-left: 0; /* 清除ul默认左侧内边距 */
  margin: 0; /* 清除ul默认外边距，优化布局紧凑度 */
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  text-decoration: none;
}

/* 移除无效的.left-links a样式，align-items是flex容器属性，不能用于a标签且无left取值 */

关键修改说明 #

1. padding-left: 0：直接消除ul默认的左侧内边距，让left-links紧贴header左边缘
2. align-items: center：确保logo和链接列表都在header中垂直居中，满足自检要求
3. 移除无效代码：清理冗余且错误的样式规则

内容的提问来源于stack exchange，提问作者Hoko L