С помощью флексов мы расположили элементы списка в ряд, а также выровняли их по главной оси. Чтобы наш компонент стал походить на макет, осталось поработать с отступами — обнулить отступы у списка и добавить их ссылкам.

Отступы у боксов бывают внутренними (padding) и внешними (margin). Если требуется задать одинаковые отступы со всех сторон, удобно использовать краткую запись:

.element {
  margin: 0;
  padding: 10px;
}

Для соответствия макету мы можем задать внешние отступы как элементам списка, так и вложенным в них ссылкам. Но внутренние отступы следует добавлять именно ссылкам. Внутренние отступы добавляют ссылкам для того, чтобы увеличить область, по которой можно кликнуть (её ещё называют активной областью). Чем проще попасть по ссылке, тем удобнее интерфейс.

А вот задавать ссылкам фиксированную ширину не рекомендуется. В отличие от крупных сеток, где все размеры брались из макета, в микросетках ширина элементов чаще всего зависит от содержимого. Текст у ссылок разной длины, кроме того, он со временем может измениться. Если задать ссылкам точную ширину, то при изменении текста вёрстка сломается.

Итак, обнулим у списка navigation-list внешние и внутренние отступы по умолчанию. Затем добавим отступы ссылкам с классом navigation-link.