Mobile Menu Position

I am using the small blog demo setup for my website.

I have enabled the display as icon for the desktop menu. I am using the sidebar flyout menu for the menu style overlay.

While this looks great on a mobile phone, the menu only floats out to the start of the right hand margin which makes it look odd on a wide desktop monitor.

Is there anyway to get the menu to float to the right hand margin of the actual body part of the website instead of stopping at the far right margin. In other words, can the menu float to the right hand edge of the white area instead of stopping in the margins. If you go to my website, you will see I have changed the menu and made it float towards the centre by adding the code:

.html_av-overlay-side .av-burger-overlay-scroll {
position: absolute;
right: 480px;
}

But of course this just floats the menu over 480 pixels which looks good on my monitor but floats it too far right on smaller screen sizes. So is it even possible to float or position the menu on the right hand edge of the white area (Body/Content area) for all screen sizes?