Hej Anna.
Du kan indstille højden på din menu med css.
Hvis du gerne vil have det hele til at passe sammen her og nu, kan du indstille, jeg synes 75px top margin ser rigtigt ud på #navigation i linje 530 i dit stylesheet.
Afstanden mellem menupunkterne kan du indstille på linje 541, de har en venstremargin på 15px, prøv at fordoble dén og se hvad du synes.
Hvis du gerne vil have det hele til at passe sammen altid, skulle du næsten se på flex-box i stedet.
På din container (den hedder header-content) indstiller du:
display: flex;
align-items: center;
på din menu-container fjerner du padding og indstiller:
flex-grow:1;
text-align:right;
og på selve menulisten (ul):
display:inline-block;
Hold øje med dine media queries, så du er sikker på ikke at komme til at ændre indstillinger for andre skærmstørrelser.
Du skal nok også lige tjekke forskellige syntakser for flex-box i de forskellige browsere. Flex-box er ikke bagvendt kompatibelt med IE 9 og nedefter, så hvis din demografi er explorer-bruger, er det generelt en dårlig ide.
Jeg deler også lige et link til webAIM, selvom jeg godt ved du sikkert stadig er i udviklingsfasen: http://webaim.org/resources/contrastchecker/
Kontrasttjekkeren hér kan holde øje med om de farver vi vælger til vores layout er gode ift. læsevenlighed. Her er et skærmbillede af en test af dine to farver:
http://imgur.com/qYEqjTZ