Configuré el componente Grid para que ocupe 6 en pantallas pequeñas/medianas para que estén una al lado de la otra y 12 en pantallas xs para que cada elemento sea . No tengo problemas en la vista de la computadora, pero por alguna razón, cuando reviso la vista móvil de mi sitio web, el componente de papel se desborda fuera de la imagen de fondo en la parte inferior. *ACTUALIZAR Parece que el problema es que le estoy dando al componente de papel un relleno de 5. ¿Hay una mejor manera de darle espacio a mi texto alrededor? ¿Alguien tiene una solución para esto?

 import Grid from '@mui/material/Grid'; import React from 'react' import bitMoji from "../images/bitMoji.png" import Container from '@mui/material/Container' import Box from '@mui/material/Box' import { Typography } from '@mui/material'; import Paper from '@mui/material/Paper'; function About() { return ( <Container maxWidth="md"> <Grid marginTop={10} container space={2}> <Grid item xs={12} sm={6} md={6}> <img style={{ maxWidth: '100%', height: 'auto' }} src={bitMoji} alt="" /> </Grid> <Grid xs={12} sm={6} md={6}> <Paper sx={{ padding: 5 }} elevation={10}> <Typography variant="p" component="p"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, sed beatae. Laboriosam perspiciatis molestiae delectus deleniti! Explicabo inventore eius ad veniam rem illo architecto ut, numquam atque officia et quae? </Typography> </Paper> </Grid> </Grid> </Container> ) } export default About

aplicación.css

 height: 100vh; overscroll-behavior: none; scroll-behavior: smooth; background-repeat: no-repeat; background-image: url('https://images.unsplash.com/photo-1557128928-66e3009291b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'); }```