`overflow-x: hidden` disables navbar in Boostrap - why?

Problem

I use Bootstrap v.3.2 in my responsive web app, but since the Bootstrap automatically shows the redundant horizontal space and makes the web layout look awful as well as display the horizontal scrolling bar (see this link in Github), I want to remove the redundant space in Bootstrap.

However, when I tried to write overflow-x: hidden to * as suggested in the linked issue, the layout looks good and it doesn't show the horizontal scrolling bar, but then the navbar's dropdown menu doesn't work at all (cannot be enclosed - other navbar (no dropdown link) works as usual). Why does the navbar's dropdown not work after I set overflow-x: hidden to *?

Also, when I tried to change overflow-x: hidden from * to body, then the navbar works properly but the layout doesn't change at all. Why?

Note that when I add overflow-x: hidden to .container-fluid, then the navbar doesn't work either as it was when written in *.

And finally, how can I remove the redundant horizontal space and the horizontal scrolling bar? That is what I wanted to do in the first place, so I don't mind whether I use overflow-x or not.

Problem courtesy of: Blaszard

Solution

As noted in the issue, the correct fix is to just use container-fluid. No need to mess with overflow-x yourself.

Solution courtesy of: cvrebert

Discussion

because if you use * as selector, then you'll apply the styles to EVERYTHING. You can use * in descendant order of an element, or if you want to apply it to everything (just the asterisk alone equals everything), then add overflow:auto to any element where you need scroll bars, eg your navbar

Discussion courtesy of: Devin

This recipe can be found in it's original form on Stack Over Flow.