Fixing Mobile Navigation Header

Hi,

On my current website, I have a custom header which works great on desktop but the 3 bars on the mobile display is too far to the right (at the edge of the screen and not on the white pill shape). Is there any way to fix this? Here is the current code I'm using for the navigation:
 

.header-title-nav-wrapper {
  border-background: #FFFFFF}

@pilo-bar-background: #FFFFFF;
@pilo-bar-padding: 5px 25px;
@pilo-bar-border: 0px solid #000;
@pilo-bar-radius: 30px;

.header-title-nav-wrapper {border: @pilo-bar-border; background: @pilo-bar-background; padding: @pilo-bar-padding; border-radius: @pilo-bar-radius;}

Here is the password for the site:
raccoon-vuvuzela-kxxa.squarespace.com
Password: SMJ

1 hour ago, nitzin said:

Hi,

On my current website, I have a custom header which works great on desktop but the 3 bars on the mobile display is too far to the right (at the edge of the screen and not on the white pill shape). Is there any way to fix this? Here is the current code I'm using for the navigation:
 

.header-title-nav-wrapper {
  border-background: #FFFFFF}

@pilo-bar-background: #FFFFFF;
@pilo-bar-padding: 5px 25px;
@pilo-bar-border: 0px solid #000;
@pilo-bar-radius: 30px;

.header-title-nav-wrapper {border: @pilo-bar-border; background: @pilo-bar-background; padding: @pilo-bar-padding; border-radius: @pilo-bar-radius;}

Here is the password for the site:
raccoon-vuvuzela-kxxa.squarespace.com
Password: SMJ

Have you fixed it yet?

I check that it works properly on my device

@Beyondspace yes, i ended up fixing it. Thank you!