Um aspecto que gosto na configuração móvel é que o menu da barra lateral desliza como uma sobreposição e não fica embutido na página. Para mim, parece mais “nativo” em um dispositivo móvel.
Que tal apenas adicionar uma declaração de breakpoint?
@include breakpoint(mobile-extra-large) {
#main-outlet-wrapper {
margin-left: unset;
margin-right: unset;
}
}
Assim, em dispositivos móveis estreitos, o espaço extra potencial é removido, mas dispositivos mais largos teriam o wrapper centralizado.