A couple of days ago, I found my self with something that I never have thought before, but went on research to solve it out.
I have a menu, and inside it, I have its items. I wanted to these items to fill the entire width of its parent; I found some solutions, including these one (which I personally think is the most simple, and don't use any hacks to do the job):
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;
}
Where I found it, there was even an working example at JSFiddle. I created a new blank document, and tried it there, and worked. But, unfortunately, this simply doesn't work in my already complete website. I've thought many things: my tags are inheriting properties, there may be a conflict amongst previous properties, and a lot more. I've tested them all, and still nothing. The only thing I haven't done yet is to start from scratch again (for obvious reasons).
So, my question is, do you have any idea of what could possibly be happening? Anything at all?
PS: I've tried all of this locally on my PC, but the website is already online. If you want to check it out: http://geesufmg.com (just to be clear, where I'm trying this is where the buttons "Home", "Engenharia de sistemas", "Sobre o curso", etc, are - the container is div#menu and items are div.menu_item).