header 中的列表项不是很居中（使用 Flexbox）

Question

如果在桌面上看还好，但在移动设备上，列表项左右两侧的间距肯定不均匀。

注意：列表项是粉红色的。

如果您能帮助我们均匀间隔，我们将不胜感激！

Link 到代码笔：https://codepen.io/connorocampo/pen/OoRygB?editors=1100

<ul id="flex-nav">  
  <li><a href="#skills" class="nav-link">Skills</a></li>
  <li><a href="#certified" class="nav-link">Certified</a></li>
  <li><a href="#hire" class="nav-link">Hire!</a></li>
</ul>  

<style>
#flex-nav{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0px;
  padding-bottom: 5px;
}
</style>

Answer 1

将 padding-left: 0 添加到您的容器 (#flex-nav)。

列表元素带有默认填充（或边距）。

这是您在 Chrome 中的代码：

此外，您可以完全避免这个问题并像这样简化您的代码：

#flex-nav{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0px;
  padding-bottom: 5px;
}

<nav id="flex-nav">  
  <a href="#skills" class="nav-link">Skills</a>
  <a href="#certified" class="nav-link">Certified</a>
  <a href="#hire" class="nav-link">Hire!</a>
</nav>

header 中的列表项不是很居中（使用 Flexbox）

List items in header are not quite centered (using Flexbox)

html

css

centering

flexbox