Space after page header

Hithere,

actually I already opened e ticket, but something went wrong. So I try it again:

The page header of the front page has a height of 407 px, but should be only 400 px like the other pages. There is a space of 7 pixel after, which I do not understand. I have one header element for all pages and different hook elements with sliders. In the front page hook is a video inside:

<div class="grid-container">
<div class="video-logo">
    <img src="https://waescherei-dobrovsky.de/wp-content/uploads/2020/02/Logo-Dobrovsky-line.png" alt="Wäscherei Dobrovsky">
	</div>	
<video loop muted autoplay poster="https://waescherei-dobrovsky.de/wp-content/uploads/video/videoposter.jpg">
    <source src="https://waescherei-dobrovsky.de/wp-content/uploads/video/wasser.mp4" type="video/mp4">
	</video>
</div>

.grid-container {
position: relative;
padding: 0;
}
.video-logo {
position: absolute;
padding: 20px;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
max-height: 400px;
z-index: 0;
}

How can I close the space of this 7 pixels?

Thank you in anticipation!