ARTICLE AD BOX
The culprit is position: absolute on .navbutton. Absolutely positioned elements are removed from the normal document flow, which means the flexbox container can't see them — so all the buttons stack on top of each other at the same position.
Simply remove position: absolute from .navbutton and the flex layout will work as intended:
.navbutton { color: white; font-size: 15px; text-decoration: none; background-color: rgba(0, 0, 0, 0.7); /* removed: position: absolute; */ padding: 20px; box-sizing: border-box; border-radius: 9px; cursor: pointer; font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Console", monospace; }You might also want to add width: 100% to .navbutton so each button stretches to fill the container width, since buttons default to only being as wide as their content:
.navbutton { width: 100%; /* rest of your styles */ }That's also why plain text worked fine — text nodes are normal flow elements, so flexbox could arrange them. Buttons with position: absolute opted out of that flow entirely.
