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

user_8402074 0
Viewed 30

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!

enter image description here

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>
flexbox centering css html
1 Answers

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

List elements come with default padding (or margin).

This is your code in Chrome:

enter image description here

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>

user_35972760
Related