Image Banner text/header doesn't stay central to image height (Ride Theme)

[JayFinlay]

I am trying to shrink the image banner with custom css, so far I have this written up: 

h2 {
font-size: 18px;
}
@media (min-width: 768px) {
.banner {
display: none;
}
}
.banner {
height: 55px;
}

The issue is the text I have attached to the image banner is below the picture and doesn't stay aligned and central to the height of the banner when I adjust the px in CSS.
My website is https://downunderthunder.com.au
Image for reference (Blue area and text below)

What am I missing to align it regardless of the px I enter so it's always central.

Thanks in advance for any assistance!

[Dan-From-Ryviu]

Please remove this code in Custom CSS of that section 

.banner {
    height: 90px;
}

[JayFinlay]

I need to keep that. The default sizing is too big by default even on small or adapt to image for what I need. I actually want to make it

.banner { height: 55px; 

I just need the text to stay centered when I adjust the height by this method so it sits perfectly central regardless of px. Is this not possible?

[JayFinlay · Accepted solution]

h2 {
font-size: 18px;
padding-top: unset;
position: relative;
top: -30px;
}
@media (min-width: 768px) {
.banner {
display: none;
}
}
.banner {
height: 55px;
}