Impact of border property on top margin

Answer 1

Borders should not affect margins (edit: except here because of margin collapsing, see @salman-a's answer. My bad. But you should still use a CSS reset).

I think you need some sort of CSS reset

One I find usefull for quick testing is the simplest of all (but not recommended to use in other cases, beacause it is way to simple):

*{padding:0;margin:0}

This will clear all browser padding/margin.

I think the problem here is you did not reset your header and ul margins, and the browser adds them (browser do that in order to display stuff nicely, even if there is no CSS).