Logo not showing in header on mobile

I was able to move the logo to the header, centered at the top of the page. It looks great on desktop, but on mobile the logo was displaying at the bottom, over the image and hard to read.

https://www.pbbrain.com

Based on another thread, I tried adding this CSS, but it just made the logo disappear completely (on mobile)

@media screen and (max-width: 480px) {

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img
.site-branding {
position: absolute;
}
{
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;

}
}