Почему два меню переходят на новую строку, хотя место есть, если отступы убрать, то такого нет.
Скриншот проблемы:
И еще вопрос, как сделать что бы два меню оттолкнулись друг от друга на одинаковое расстояние не используя margin? Есть такое свойство, как align-content: space-between, но оно не помогает (На скриншоте этот отступ сделан margina'ми
Все верно работает, оно переходит потому что у вас задано свойство у флекс контейнера: flex-direction: column, соответственно они выстраиваются в колонку, т.е меняется ось
Так это два меню в колонку переходят, т.к. flex-direction: column задан для их родителя, мне не понятно почему эти два меню сжимаются и переходят на новую строчку, когда места слева еще куча.
Начиная от тега "nav" и далее выше по родителям элемента задайте ширину в 100%.
Чтобы сработал space-between нужна фиксированная высота (или min-height). И ещё, желательно, нужно указать для child элементов соответствующие свойства (flex-basis, flex-grow, flex-shrink). https://codepen.io/anon/pen/XEqjjB?editors=0100
Простой
Простой
