Custom logo for specific pages repeating on mobile view

Hi there, I have added in a reversed out logo to some of my website pages through adding in the below code into the pages advanced settings: page header code injection.

 

<style>

.header-title{
 background-image:url('https://static1.squarespace.com/static/66ba8d2959936e7dcf9596a3/t/66bae15a7e13c233418d70c0/1723523419303/logo+black.png');
 background-size: contain
} 
.header-title img{
opacity:0
} 
</style>

it works great on desktop, but when switched to mobile view the logo appears to have duplicated. Is there something I have done wrong in the code? Would appreciate some help! 

site pw is 1234

Change your code to this

<style>
header#header img {
 content:url('https://static1.squarespace.com/static/66ba8d2959936e7dcf9596a3/t/66bae15a7e13c233418d70c0/1723523419303/logo+black.png');
} 
</style>