I've been having some trouble with a horizontal menu layout I'm making for a blog. Most of the troubleshooting tips and tricks online don't seem to be cutting it, and no matter the change the site keeps stacking each element vertically. My CSS looks like this:
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;}My HTML looks like this. Any advice would be really appreciated!
<div class="flex-container"><div class="flex-item-left" style="font-size: 30px; cursor: pointer" onclick="openNav()">About</div><div class="flex-item-mid" style="font-size: 30px; cursor: pointer" onclick="openNav()">Projects</div><div class="flex-item-right" style="font-size: 30px; cursor: pointer" onclick="openNav()">Something idk</div></div>Tried specifying the justify-content and align-items properties as both center or both flex-start, but no dice. Tried individually declaring each flex item as display: flex, but that seemed to push the items to the left, still vertically stacked.