Problemem jest to że nagłówki <h1><h2>... i wiele elementów mają swoje domyślne style nadawane przez przeglądarkę aby każdy mógł stworzyć swój dokument bez znajomości CSS. Na przykład twój nagłówek ma 21px marginesu dolnego chociaż ty go nie ustawiałeś. To jest częsty problem i jak się o tym nie wie to później są takie błędy których przyczynę trudno znaleźć.
Co można na to poradzić? Wystarczy na początku arkusza dodać blok:
* {
margin: 0;
padding: 0;
}
Selektor * oznacza wszystkie elementy na stronie, czyli po prostu za jednym zamachem resetujesz wszystkim elementom ich domyślne marginesy i dopełnienia. Następnie możesz ręcznie ustawiać wszystkie właściwości dla elementów.