Off-canvas menu adding horizontal scroll on mobile

Hi guys,

I’m using this custom CSS from David on an another thread to customise the widths of my off-canvas menu:

/* desktop width */
:root {
    --slideout-width: 35vw;
}
/* small device width */
@media(max-width: 768px) {
    :root {
        --slideout-width: 100vw;
    }
}

#generate-slideout-menu.main-navigation.offside {
    width: var(--slideout-width);
}

#generate-slideout-menu.main-navigation.offside--left {
    left: calc(-1 * var(--slideout-width));
}

#generate-slideout-menu.main-navigation.offside--left.is-open {
    transform: translate3d(var(--slideout-width), 0, 0);
}

But, I’m now finding that it’s adding a horizontal scroll on mobile. It seems to be loading at 30px wider than the device screen size, eg. screen size set to 442px width and div.slideout-overlay loads at 472px width:

Thanks,
Greg