maqueta para responder

src/App.css

@@ -310,3 +310,20 @@
 .checkbox_label_question{
   font-weight:bold !important;
 }
+
+.question{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: stretch;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.question_btn{
+  display:flex;
+  justify-content: center;
+  padding-top:35px;
+  padding-bottom:35px;
+  margin-bottom:35px;
+}

src/Components/Test/Cleaver/Question.jsx

@@ -98,7 +98,7 @@ export function Question({ quiz }) {
   let { instrucciondepregunta, respuestas} = quiz
   return (
 
-    <Card sx={{ minWidth: 275, margin: 5 , borderLeft: '5px solid var(--main)'}}>
+    <Card sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
       <CardContent>
 
         {/*

src/Pages/Pruebas/Cleaver.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo } from 'react'
 
 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
@@ -33,7 +33,7 @@ var scroll = Scroll.animateScroll;
   }, [token]);
 
   const handleAddQuestion = () => {
-    let op = { smooth: true, duration: 200, delay :1, offset :900}
+    let op = { smooth: true, duration: 200, delay :1, offset :20}
     scroll.scrollToBottom(op);
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
@@ -43,14 +43,10 @@ var scroll = Scroll.animateScroll;
       setRespondidas([...totalRespondidas,temp]);
     }
   };
-  
-
-var scroll = Scroll.animateScroll;
-
 
   return (
 
-    <div  className="content-section">
+    <div  className="content-section question">
       <div className="main">
         <Box sx={{ mt: 1 }}>
           <List >
@@ -65,13 +61,15 @@ var scroll = Scroll.animateScroll;
           </List>
         </Box>
 
-      <Button
-        variant="contained"
-        disabled={totalRespondidas.length >= totalPreguntas.length}
-        onClick={handleAddQuestion}
-      >
-        Add Question
-      </Button>
+        <div class="question_btn">
+        <Button
+          variant="contained"
+          disabled={totalRespondidas.length >= totalPreguntas.length}
+          onClick={handleAddQuestion}
+        >
+            Siguiente Pregunta
+        </Button>
+          </div>
 
       </div>
     </div>