remove leftover space after header removal on mobile page

I’m designing a web site for a bar/restaurant that uses SmartSliders on two pages. The firm I am interning for only allows me to style these pages with the CSS from the developer tab in the SmartSlider plugin, and don’t have any access to a theme editor or Additional CSS in the Customize section. My boss wants the pages to have a brand logo to the left and the navbar to the right, with the header removed above it. On the first web page I was able to accomplish this by using these properties:

 

body:not(.home) header img {
display: none;
}

@media screen and (min-width: 48em) {
.site-branding {
margin-bottom: -24px;
}
} masthead .wrap {

position: relative;
background-image: url('https://pbpavilion.com/WP/training/wp-content/uploads/sites/2/2024/03/cropped-IMG_6692g-1.png');
background-repeat: no-repeat;
background-size: contain;
}

@media screen and (min-width: 48em) {
.js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation > div > ul {
display: block;;
float: right;
background: #ffffff;
}
}

.main-navigation ul {
background:transparent;
list-style:none;
margin:0;
padding:0 1.5em;
text-align:right;
}

@media screen and (min-width: 30em) {
.site-branding {
padding: 0;
}
}

@media screen and (min-width: 48em) {
.site-content {
padding: 0;
padding-bottom: 0px;
}
}

Which produced this result:

But when I view it on a mobile device (like my iPhone), the PB brand logo shifts up above the navbar instead of lining up to the left of it, and part of the header reappears again with a smaller version of the brand logo in it also.

If anyone more experienced than myself has any tips, ideas or guidance in order to correct the mobile issue, I’d really appreciate it – thanks.

The page I need help with: [log in to see the link]