Coding for Banner Image Above Menu

Hi! I found coding to add a banner image above the main menu, however when I add the code there is also this added space to all of the pages on the site, I'd like to remove this space but I'm not sure how, any help is appreciated!

My site URL is www.pairedesign.com / code is 12345

Below is the code I used -

/* Add a banner */

body.homepage div#siteWrapper:before {

    content: "";

    background-image: url(IMAGE URL HERE);

    background-size: cover;

    background-repeat: no-repeat;

    display: block;

    width: 100%;

    height: 700px;

}

/* Add sticky header */

header#header {

    position: sticky !important;

    top: 0;

}

THANK YOU SO MUCH! This worked great for all the pages, I'd like to remove the added space from the homepage as well, is there a way to do so? Thank you again, you're awesome!

I added this -

.page-section:first-child {
    padding-top: 0 !important;
} 

and it worked! Thank you SOOO much!!