标头中的列表项不太居中（使用Flexbox）

Question

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

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

任何帮助将它们均匀隔开的方法将不胜感激！

链接到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>

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>