Разделив навигацию на две колонки, мы получили в одной из них логотип, а в другой — список ссылок. К логотипу мы вернёмся чуть позже, а пока займёмся списком. По умолчанию элементы списка имеют блочный тип бокса. Поэтому они растягиваются на всю ширину родителя и выстраиваются сверху вниз.

Главная

Маршруты

Экипировка

Нам нужно уменьшить ширину элементов списка, расположить их в ряд и распределить между ними свободное пространство.

Проще всего это сделать с помощью флексов, потому что флекс-элементы по умолчанию выстраиваются горизонтально и занимают столько места, сколько нужно их содержимому, включая отступы.

.flex-container {
  display: flex;
}

Кроме того, флексы позволяют удобно управлять выравниванием элементов. По умолчанию флекс-элементы начинаются у левой границы контейнера и идут вплотную друг за другом. Но это можно изменить с помощью свойства justify-content. Оно задаётся флекс-контейнеру и отвечает за выравнивание флекс-элементов по главной оси.

Нам нужно, чтобы первый и последний флекс-элемент прижались к краям контейнера, а свободное пространство распределилось поровну между всеми элементами. Такое выравнивание задаёт свойство justify-content со значением space-between.

.flex-container {
  display: flex;
  justify-content: space-between;
}

Обратите внимание, мы сделали грид-контейнером сам блок навигации, а теперь используем флексбокс для вложенного в него списка ссылок. Необязательно использовать при вёрстке только какую-то одну технологию, их можно комбинировать.

Итак, превратим список с классом navigation-list во флекс-контейнер, чтобы элементы списка выстроились горизонтально. Затем выровняем флекс-элементы по главной оси.