Элементы списка в заголовке не центрированы (с помощью 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>