Dodaj tę linię
section.first h2 {
/* ... */
margin: 0;
}
Dzieje się tak, ponieważ przeglądarki mają swoje domyślne style i czasem, gdy się nie chce określonego efektu, to trzeba "wyzerować"/zresetować ten styl.
Sprawdzając w narzędziach deweloperskich, te style, itp. wygląda to tak (dla user agent)
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
Używaj narzędzi deweloperskich F12 oraz sprawdź domyślne style znacznika h2 na w3.org.
Staraj się pisać z jakiej przeglądarki korzystasz, ponieważ na Chrome czegoś takiego nie zauważyłem. Zgodnie z tą poradą davidwalsh.name, wystarczy napisać tak:
header {
font-size: 0;
}
header * {
font-size: 16px;
}
Możesz też wykomentować białe znaki, używając komentarza <!-- ... -->.