After spending nearly 3 hours figuring out why my media query would not work properly, reading post after post looking for the diabolical error, some kind soul reminded me to make sure my page was zoomed at 100%. Three hours to discover one tab had been zoomed to 80%. I had been designing everything on a window at 80%!
I will not ever overlook the magnifying glass in the Chrome address bar again.
Wait, who am I kidding. It will happen again. Just give it some time, that or some other misplaced comma, space, dot, an otherwise seemingly innocuous punctuation mark or character is lurking right around the corner, waiting. We knows it. And we hates it.
In the meantime here are some helpful tidbits I have found along the way.
Explicit specificity overrules later implied specificity rules, and more. Media Query
I remember deciding to 'do the math' and design my layout down to the pixel. That was the day I discovered collapsing margins. Good times. Collapsing Margins
Suggested to only set bottom and left margin, ever, to prevent accidentally breaking previous code with unintentional collapsing margins. Other tips also. Left, bottom only
My page playing with collapsing margins. marginPlay
Space means descendant. CSS selectors
No space, (or comma) means 'and' here. CSS selectors
Comma means 'and'.
> means direct child.