CSS cookbook

One box, centered inside another, in both directions at once.

Why does a 300px box render wider than 300px the moment I add padding?

My logo and my nav links all sit on the same side. I want the last link pushed to the far edge instead.

A long username breaks a card wide open.

I wrote a rule that should change the color and nothing happens, even though I can see it sitting right there in the file.

Two stacked boxes have a bigger gap between them than either margin alone should produce, and I can't tell where the extra space came from.

A comment thread needs an avatar next to some text. So does a notification, and a settings list row.

The same button and text field look clean in one browser and clash with the rest of the page in another.

Why does every button on the page just snap between states instead of easing?

A page with only a few lines of content leaves the footer floating halfway up the screen instead of sitting at the bottom.

The same blue and the same spacing number are typed out in a dozen places, and changing the brand color means hunting through every file.

z-index: 999 on a dropdown. It still renders behind a section with no z-index at all.