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

Question

If viewed on desktop it seems fine, but on mobile there is definitely uneven spacing on the left and right side of the list items.

Note: list items are pink.

Any help in spacing these evenly would be much appreciated!

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

Add padding-left: 0 to your container ( #flex-nav ).

List elements come with default padding (or margin).

This is your code in Chrome:

Also, you can avoid the problem altogether and simplify your code like this:

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