Center and reduce footer

components/footer.js

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
-import {Box, Link, Typography, useMediaQuery} from '@mui/material'
+import {Box, Container, Link, Typography, useMediaQuery} from '@mui/material'
 
 import {rezoLis} from '../lib/rezo-lis'
 
@@ -20,7 +20,7 @@ const Root = styled('div')((
   }
 ) => ({
   [`& .${classes.footer}`]: {
-    padding: theme.spacing(3, 2),
+    padding: theme.spacing(1, 2),
     marginTop: 'auto',
     backgroundColor:
       theme.palette.mode === 'light' ? theme.palette.grey[100] : '#1E3526'
@@ -40,7 +40,7 @@ export default function Footer() {
       <Root>
         <CGUDialog open={open} setOpen={setOpen} />
         <footer id='cgu' className={classes.footer}>
-          <Box sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
+          <Container sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
             <Box sx={{textAlign: isMobile ? 'center' : '', marginTop: isMobile ? '1em' : ''}}>
               <Typography className={classes.text} align='center' variant='body1'>
                 <Link href='#cgu' onClick={() => setOpen(true)}>
@@ -51,7 +51,7 @@ export default function Footer() {
             <Box sx={{display: 'flex', justifyContent: 'center'}}>
               {rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
             </Box>
-          </Box>
+          </Container>
         </footer>
       </Root>
     )