question fix style

src/App.css

@@ -320,7 +320,8 @@
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
+  padding : 100px;
 }
 
 .question_btn{
@@ -348,6 +349,6 @@
   grid-column: 1;
   grid-row: 1;
   min-width: 275;
-  margin: 10px !important; 
+  /* margin: 10px !important;  */
   /* border-left: 5px solid var(--main); */
 }

src/Components/Test/Cleaver/Question.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
-  Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,
+  Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,Slide,
   ListItem,ListItemButton,ListItemIcon,ListItemText,
 } from '@mui/material'
 

src/Pages/Pruebas/Cleaver.jsx

@@ -5,18 +5,39 @@ import { Box,Button, LinearProgress, Backdrop, CircularProgress, } from '@mui/ma
 import { useSelector } from 'react-redux';
 import { useParams, useNavigate } from 'react-router-dom'
 import toast, { Toaster } from 'react-hot-toast';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 
 function LinearProgressWithLabel(props) {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Box sx={{ width: '100%', mr: 0 }}>
-        <LinearProgress variant="determinate" {...props} />
+        <LinearProgress color="primary" variant="determinate" {...props} />
       </Box>
     </Box>
   );
 }
 
+const theme = createTheme({
+  status: {
+    danger: '#e53e3e',
+  },
+  palette: {
+    primary: {
+      main: '#fd4b4b',
+      darker: '#053e85',
+    },
+    secondary : {
+      main: '#2ec5d3',
+      darker: '#053e85',
+    },
+    neutral: {
+      main: '#64748B',
+      contrastText: '#fff',
+    },
+  },
+});
+
 export function Cleaver() {
 
   let { id } = useParams();
@@ -122,25 +143,25 @@ export function Cleaver() {
 
 
   return (
-    <div>
-    <div className="content-section question">
-      <div style={{width:'60%', marginBottom : 35}}>
-        <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
-      </div>
-      <Box className="question_body">
-        {totalRespondidas.map((item,i) => (
-          <Question 
-            key={item.id} 
-            id={item.id} 
-            quiz={item} 
-            index={i} 
-            current={current} 
-            />)
-        )}
-      </Box>
-
-      {
-      totalPreguntas.length > 0 ?
+    <ThemeProvider theme={theme}>
+      <div className="content-section question">
+        <div style={{marginTop : 35}}>
+          <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
+        </div>
+        <Box className="question_body">
+          {totalRespondidas.map((item,i) => (
+            <Question 
+              key={item.id} 
+              id={item.id} 
+              quiz={item} 
+              index={i} 
+              current={current} 
+              />)
+          )}
+        </Box>
+
+        {
+        totalPreguntas.length > 0 ?
           (
             <div className="question_btn">
               <Button
@@ -175,18 +196,18 @@ export function Cleaver() {
               </Button>
             </div>
           )
-      
+
       }
-      <Toaster position="bottom-right" />
-      <Backdrop
-        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={open}
-        // onClick={()}
-      >
-        <CircularProgress color="inherit" />
-      </Backdrop>
-    </div>
-    </div>
+        <Toaster position="bottom-right" />
+        <Backdrop
+          sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+          open={open}
+          // onClick={()}
+        >
+          <CircularProgress color="inherit" />
+        </Backdrop>
+      </div>
+    </ThemeProvider>
   )
 
 }