Navbar optimizations

[MartijnCuppens]

• Remove redundant display: inline-block from flex children
• Remove line-height: inherit; which is the default value of line-height
• Use flex shorthand
• Improve background shorthand
• Fix removed brand margin caused by requiring containers in navbars

[XhmikosR]

@MartijnCuppens did you test this with IE 11 too?

[MartijnCuppens]

@MartijnCuppens did you test this with IE 11 too?

Yes

[mdo]

• Use flex shorthand
• Improve background shorthand

Generally speaking, I always prefer to be explicit instead of using shorthand. Shorthand often hides an explicit choice and can add extra property-values. Long form is also a little more readable IMO as it avoids special syntax around /, spaces, etc. Thoughts?

[XhmikosR]

It's a thin line for sure :/ That being said when we just need to set all properties, a shorthand is fine IMHO. No need not to leverage shorthands' power in this case.

[MartijnCuppens]

Generally speaking, I always prefer to be explicit instead of using shorthand.

It's a thin line indeed, but in this case:

• The adjustments to the flex shorthand only add flex-shrink: 0, which makes sense because you don't want to chop off the navigation.

• The background property was already a shorthand which didn't include the background sizing.

when we just need to set all properties, a shorthand is fine

Let's live by this rule. I'm gonna check where we need to adjust things on other places (I'll open a separate PR to fix these issues).