Html 标题中的列表项未完全居中（使用Flexbox）

如果在桌面上查看，它看起来不错，但在移动设备上，列表项的左右两侧肯定存在不均匀的间距

注意：列表项为粉红色

如果您能帮我把这些东西均匀地隔开，我们将不胜感激

链接到代码笔：

#灵活导航{
显示器：flex；
对正内容：空间均匀；
边缘底部：0px；
垫底：5px；
}

将

左侧填充：0

添加到您的容器中（

#flex nav

）

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

这是您在Chrome中的代码：

此外，您还可以完全避免该问题，并将代码简化为：

#灵活导航{
显示器：flex；
对正内容：空间均匀；
边缘底部：0px；
垫底：5px；
}

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

<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>