One aspect I do like about the mobile setup is that the sidebar menu slides in as an overlay and not embedded on the page. It feels more “native” on a mobile device to me.
How about just adding a breakpoint declaration?
@include breakpoint(mobile-extra-large) {
#main-outlet-wrapper {
margin-left: unset;
margin-right: unset;
}
}
So on narrow mobile devices the potential extra space is removed, but wider devices would have the wrapper centered.