Probleme mit der Flex-Richtung: Zeile mit drei -Elementen ⇐ CSS

[Guest]

Ich hatte Probleme mit dem horizontalen Menülayout, das ich für einen Blog erstelle. Die meisten Online-Tipps und -Tricks zur Fehlerbehebung scheinen nicht zu greifen, und unabhängig von der Änderung stapelt die Website jedes Element weiterhin vertikal. Mein CSS sieht so aus:

Code: Select all

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;
}

Mein HTML sieht so aus. Für jeden Rat wäre ich sehr dankbar!

Code: Select all

About
Projects
Something idk

Es wurde versucht, die Eigenschaften „justify-content“ und „align-items“ als „center“ oder „beide flex-start“ anzugeben, aber keine Dice. Ich habe versucht, jedes Flex-Element einzeln als display:flex zu deklarieren, aber das schien die Elemente nach links zu schieben, immer noch vertikal gestapelt.