Issue with logo on mobile

Site URL: https://sealion-saffron-8hn9.squarespace.com/

PW: riverright

I am having an issue where the logo is showing correctly on mobile for the home page but on the mobile version, it is showing the logo twice and super stretched out. I am not good with code but did add the following code found on this forum to fixe some other issues: 

Custom CSS: 

header-nav {
  position: absolute;
  width: 50vw !important;
  left: 0%;
  transform: translateX(-50%);
}

.header-actions--right {
  width: 20vw !important;
}

.sqs-block-content .lightbox-handle {
 background: #5c95a3 !important;
}

Code Injections for SVG logo: 

<!---SVG LOGO--->
<style>
/*Hide PNG Logo*/
.header-title-logo img, .header-mobile-logo img {
visibility: hidden;}

/*Replace with SVG Logo*/
.header-title-logo a, .header-mobile-logo a{
background: url(https://sealion-saffron-8hn9.squarespace.com/s/RR_Logo_Rectangle_white.svg) no-repeat!important;
background-position:center!important;
background-size: contain!important;}
</style>

I am only seeing this on my phone and not when I look at the mobile version on my computer. 

Hi,

I think logo is already fine now

@tuanphanThe issue only seems to be happening on an actual cell phone and not when looking in chrome or squarespace on various devices 

Remove this code

<style>
/*Hide PNG Logo*/
.header-title-logo img, .header-mobile-logo img {
visibility: hidden;}

/*Replace with SVG Logo*/
.header-title-logo a, .header-mobile-logo a{
background: url(https://sealion-saffron-8hn9.squarespace.com/s/RR_Logo_Rectangle_white.svg) no-repeat!important;
background-position:center!important;
background-size: contain!important;}
</style>

and use this new code

<style>
header#header img {
	content: url(https://sealion-saffron-8hn9.squarespace.com/s/RR_Logo_Rectangle_white.svg);
}
</style>