Custom Hamburger Image on Desktop & Mobile ~ Alignment/Size issue

Hello lovely angels of Squarespace forum (and superhero @tuanphan)

I added a custom image for the hamburger and also made the mobile menu active for desktop view. It's working pretty well, I'm just having issues with the alignment and size. I want to icon to be relatively large (around 90 px wide), but on smaller screen and on mobile, the icon gets cut off. I can't figure out how to move the icons to the left a little so it doesn't get cut off.

Website: https://www.crystalmind.design/

PW: happydog

THANK YOU SO MUCH!

- Chloe

Here is the code I used:

// CUSTOM HAMBURGER
/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6362909e6596c42839983790/1667403934287/Hamburger.png);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent !important;
    display: block;
    width: 100px;
    height: 60px;
}
.burger-inner>div {
    display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
    background-image: url(https://static1.squarespace.com/static/5ee903c7326ba435104d57a9/t/6364ff46b118c16557fff23c/1667563334640/Hamburger_1.png) !important;
}

Yay!! It worked!! Thanks for your help @Ziggy

Happy to help! Can you mark my past as the solution and upvote? Thanks!