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

【问题标题】：List items in header are not quite centered (using Flexbox)标题中的列表项不是很居中（使用 Flexbox）
【发布时间】：2019-02-04 20:52:04
【问题描述】：

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

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

非常感谢任何有助于均匀间隔的帮助！

codepen 链接：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>

【问题讨论】：

标签： html css flexbox centering

【解决方案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>

【讨论】：

你是天使！感谢您指出这一点！应该知道使用开发工具。
@connorocampo 如果这个回答对你有用，你应该接受它。
完成！也感谢您指出这一点。还在学习这里的礼仪。