Evenly separated DIV's technique not working - html

Question

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">
<div class="menu_item">Item 1</div>
<div class="menu_item">Item 2</div>
<div class="menu_item">Item 3</div>
</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).

Answer 1

That still works, you just need to add it to your a tag's parent which is div.container in your actual code, not div#menu:
div.container{
display:flex;
justify-content:space-between;
}
div.menu_item {
white-space:nowrap;
}
UPDATE
On further inspection of your code the issue is you are using .container in more than one place (which is fine because it's a class but adding those properties to it is going to effect other places). You need to target .container under a specific identifier (in this case #menu):
#menu .container{
display:flex;
justify-content:space-between;
}
#menu .container a{
white-space:nowrap;
}
FIDDLE