我的左侧标题的 div 中有多余的空间？
我正在尝试完成 Odin 项目中 Flexbox 的 CSS 练习。这是自检：
自检
- 所有项目和标题边缘之间都有空间（具体的像素数量在这里并不重要）。
- 徽标垂直和水平居中。
- 列表项是水平的，并且在标题内垂直居中。
- 左链接和右链接被一直推向左侧和右侧，并且在调整页面大小时停留在标题的边缘。
- 您的解决方案不使用浮动、内联块或绝对定位。
然而，类 left-links 的 div 中有额外的空间，这对于 HTML 或 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;
}<!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有默认的填充。如果你想摆脱它，你可以重置该填充值，如下所示
ul {
padding: 0;
}
ul {
padding: 0;
}
.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;
padding: 0; /*Removed the default padding*/
}
a {
font-size: 22px;
background: white;
padding: 8px;
/* this removes the line under the links */
text-decoration: none;
}
.left-links a {
align-items: left;
}