Want the Logo to overlap header (contained)

Hello,

i try to let the logo overlap the header element (should conatin a image slider later) with this code:

.header-image {
position: absolute;
top: 10px;
left: 10px;
}

And keep it small on mobile with this:

@media (max-width: 768px) {
.site-logo img {
height: 100px;
}
}

So far, so good. But i cant get it "contained" with the navigation "inside-header". :(

What am I doing wrong?

Many thanks in advance!