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

Чаще всего элементы выпадают, если верстальщик не учитывает, что содержимое страницы может измениться. Когда мы верстали крупные сетки, то могли быть уверены, что на странице не появится вторая шапка или подвал. Но количество мелких сеточных элементов, например ссылок в навигации, будет меняться почти наверняка. Это нужно предусмотреть.

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

Для этого используют свойство flex-wrap. Значение по умолчанию nowrap запрещает перенос, но если изменить его на wrap, флекс-элементы начнут переноситься.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Добавим списку navigation-list свойство flex-wrap со значением wrap и убедимся, что элементы списка не будут вываливаться, а вместо этого перенесутся на новую строку.

После этого уберём подсветку боксов.