The other day, I encountered something completely new to me and decided to embark on a quest for answers.
I had a menu with various items inside it, and I wanted these items to span the full width of their parent element. After trying out different solutions, I settled on one that seemed simple and didn't involve any tricks:
HTML
<div id="menu">
<a href="#"><div class="menu_item">Item 1</div></a>
<a href="#"><div class="menu_item">Item 2</div></a>
<a href="#"><div class="menu_item">Item 3</div></a>
</div>
CSS
div#menu {
display:flex;
justify-content:space-between;
}
div.menu_item {
white-space:nowrap;
}
I even found a working example on JSFiddle. When I tested it in a new document, it worked perfectly. However, when I tried implementing it on my fully developed website, it just wouldn't cooperate. I considered several factors like inheritance of properties and conflicts, but nothing seems to work. The only option I have left is to start from scratch (which I'd rather avoid).
So here's my question: any insights on what might be causing this issue? Any thoughts at all?
PS: I've experimented with all this on my local computer, but the actual website is already live. If you want to take a look: (the section where I'm facing this challenge is where the buttons "Home," "Engenharia de sistemas," "Sobre o curso," etc., are located - with the container being div#menu and items as div.menu_item).