Reduce empty space

There’s space above and below the header which initially is managed by the theme’s style.css …

.site-header {
padding-top: calc(0.75 * var(--global--spacing-vertical));
padding-bottom: calc(2 * var(--global--spacing-vertical));
}
@media only screen and (min-width: 482px) {
.site-header {
padding-top: calc(var(--global--spacing-vertical)) / 0.75);
padding-bottom: calc(3 * var(--global--spacing-vertical));
}
}
@media only screen and (min-width: 822px) {
.site-header {
padding-top: calc(2.4 * var(--global--spacing-vertical));
}
}

… whereby var(--global--spacing-vertical) is set to 30px.

Then you have this in your “Customizer – Additional CSS” …

.site-header {
padding-top: 22.5px;
}
@media only screen and (min-width: 822px) {
.site-header {
padding-top: 72px;
}
}

… which is overriding the theme CSS.

The small space above the menu is being caused by the margin below your logo …

.site-logo {
margin: calc(var(--global--spacing-vertical)) / 2) 0;
}

If you wanted to change the space (padding) below the menu (header), you could use this …

.site-header {
padding-bottom: 20px;
}
@media only screen and (min-width: 482px) {
.site-header {
padding-bottom: 30px;
}
}

… which would make it 20px for smaller screens and 30px for larger screens for example.

Hope that helps?

Oliver