Hiding section on mobile causes section to move into header space

I'm working on a site where I want different text sections to show depending on whether it's displayed on mobile or desktop. To achieve this, I use code from @tuanphan found on this forum:

/* Hide this on Mobile */
@media screen and (max-width:767px) {
    section[data-section-id="65a90fba666ba066ad4a4ee9"]{
        display: none;
    }
}

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
    section[data-section-id="65a90ce4531574783e83ad15"] {
        display: none;
    }
}

In both cases, it works to hide one of the sections for the media format in case. However, on desktop, it also causes the text section to move up into the header space (see screenshots, the lower one is a reference for how the rest of the projects looks, which is how I want it) - something that hasn't been an issue before on the site. What might the problem be here? The mobile version looks good.

 

17 hours ago, Ziggy said:

You could also add a couple of rows to the top of the mobile section (on the mobile view) to account for that lack of padding.

Yes, that's what I ended up doing! Switching the sections so the mobile version moved up into the header space, and added three rows in the top of the section