I have used Chrome’s inspect element feature to try to find what’s wrong but the white space doesn’t seem to “belong” to any element. I have put zero padding and margin on just about everything.
is what I often use (don’t use the margin one if you are already setting your own margins on everything already, but I usually like things at 0 anyhoo).
Your top-goober is being caused by that p#breadcrumb. P’s have natural margins, which is why my * {margin: 0;} always catches them. It’s hard for you to see that it’s from the p because you relatively positioned it elsewhere.
Let the breadcrumb get naturally pushed down by the stuff in <header>… or better yet, move the breadcrumb outside of and after the header. No reason to make everything more weird and difficult with relative positioning.
When you say “position: relative” on something, you’re actually creating a copy of that thing: a whole new box who sits on top of the old box.
When you move that box with top: 280px, you’re only moving the new box, which is visibly showing everything in it. The old box, however, is still there! Taking up space, and most importantly here, letting its margin get collapsed up into its parent, the <header>.