Проблемы с flex-direction: строка с тремя элементами ⇐ CSS

[Anonymous]

У меня возникли проблемы с макетом горизонтального меню, который я создаю для блога. Большинство советов и приемов по устранению неполадок в Интернете, похоже, не работают, и независимо от изменений сайт продолжает размещать каждый элемент вертикально. Мой CSS выглядит так:

Код: Выделить всё

type .flex-container {
display: flex;
flex-direction: row;
font-size: 60px;
text-align: center;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}

@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

.flex-item-left {
padding: 10px;
flex: 33%;
text-align: center;

}

.flex-item-mid {
padding: 10px;
flex: 33%;
text-align: center;
}

.flex-item-right {
padding: 10px;
flex:34%;
text-align: center;
}

Мой HTML выглядит так. Будем очень признательны за любые советы!

Код: Выделить всё

About
Projects
Something idk

Пытался указать свойства justify-content и align-items как center или flex-start, но без кубиков. Попробовал индивидуально объявить каждый гибкий элемент как display: flex, но это, похоже, сдвинуло элементы влево, но они все еще располагались вертикально.


Подробнее здесь: https://stackoverflow.com/questions/793 ... v-elements