Soy bastante nuevo para reaccionar tan desnudo conmigo.

Actualmente tengo una barra lateral de navegación a la izquierda y está arreglada. Estoy tratando de crear todas las páginas que aparecen a la derecha. En esas páginas, estoy usando material-ui Grid.

Pero tengo problemas porque el contenedor div para las páginas de la derecha se extiende hacia la izquierda incluso hasta la barra lateral, por lo que se rompe el "tamaño de pantalla" de la cuadrícula.

Aquí está el escenario actual:

Y esto es lo que quiero:

Aquí está mi código actual en CSS para los divs de la derecha:

 .Background { min-height: 100%; width: 100%; position: absolute; } .Container { min-height:100%; width: 100%; display: flex; flex-direction: column; position: absolute; padding-left: 250px; padding-bottom: 3rem; background-color: rgb(252, 249, 251); }

.background div extendiendo el ancho completo está bien porque eso solo establece el color de fondo. Sin embargo, el fondo del contenedor, lo quiero desplazado hacia la derecha. Actualmente, estoy usando un margen izquierdo de 250 px, que es el ancho de la barra lateral, pero esto solo empuja los componentes hacia la izquierda. Cuando trato de usar Grid, todavía piensa que toda la página es el ancho de la pantalla.