better big screen responsivity

index.html

@@ -54,7 +54,7 @@ <h2 class="mb-0" id="quiz">Quiz</h2>
             </div>
         </div>
     </div>
-    <div id="questionsContainer"></div>
+    <div id="questionsContainer" class="questions-container"></div>
     <div id="correctCount"></div>
     </nav>
 

styles.css

@@ -1,3 +1,38 @@
+.questions-container {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5vw 0.5vh;
+    /* Default padding for small devices */
+}
+
+@media (min-width: 576px) {
+    .questions-container {
+        padding: 5vw 10vh;
+        /* Increased padding for larger devices */
+    }
+}
+
+@media (min-width: 768px) {
+    .questions-container {
+        padding: 5vw 15vh;
+        /* Further increased padding for even larger devices */
+    }
+}
+
+@media (min-width: 992px) {
+    .questions-container {
+        padding: 5vw 20vh;
+        /* Even more padding for large devices */
+    }
+}
+
+@media (min-width: 1200px) {
+    .questions-container {
+        padding: 5vw 25vh;
+        /* Maximum padding for extra large devices */
+    }
+}
+
 html {
     scroll-behavior: smooth;
 }