Site Title overlays/hides Site Logo on Mobile

<h1 class=”site-title”> text content displays fine on desktop browsers but when same page viewed on Mobile device, the Site Title text appears pushed to left on top of the logo, creating an unwanted layering effect. I have tried editing this:
.site-title a {
color: #FFFFFF;
display: block;
max-width: 100%;
}
and replacing “display: block” with “display: none” but this screws up the layout.
Any suggestions appreciated.

THanks.