Set maximum width to 40rem across screen sizes

Some rules are removed to correct the bounding box size
in browser inspector and fix the overflow on the x-axis.

public/globals.css

@@ -27,10 +27,23 @@ a {
 }
 
 html {
+    margin: auto;
+    max-width: 40rem;
+}
+
+@media only screen and (max-width: calc(40rem + 2rem)) {
+    body {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+body {
+    background-color: var(--main-bg);
+    color: var(--text-color);
+    font-family: sans-serif;
+
     margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
 }
 
 .icon {

public/home.css

@@ -1,21 +1,10 @@
 body {
-    background-color: var(--main-bg);
-    font-family: sans-serif;
-
     display: flex;
-    justify-content: center;
-    align-items: center;
-
     height: 100vh;
-    width: 100vw;
-
-    margin: 0;
-
-    color: var(--text-color);
 }
 
 .container {
-    width: 40rem;
+    margin: auto;
 }
 
 .footer {
@@ -104,10 +93,3 @@ body {
     width: 2rem;
     height: 2rem;
 }
-
-@media screen and (max-width: 800px) {
-    body {
-        padding: 1rem;
-        box-sizing: border-box;
-    }
-}

public/question.css

@@ -1,35 +1,5 @@
 body {
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-
-    overflow-x: hidden;
-
-    background-color: var(--main-bg);
-    color: var(--text-color);
-    font-family: sans-serif;
-
-    display: flex;
-    justify-content: center;
-
-    padding-left: 5rem;
-    padding-right: 5rem;
     padding-top: 2rem;
-
-    box-sizing: border-box;
-}
-
-@media (orientation: landscape) {
-    .parent {
-        max-width: 50%;
-        width: fit-content;
-    }
-}
-@media (orientation: portrait) {
-    .parent {
-        max-width: 90%;
-        width: fit-content;
-    }
 }
 
 .header {
@@ -195,10 +165,3 @@ img {
     justify-content: center;
     align-items: center;
 }
-
-@media only screen and (max-width: 800px) {
-    body {
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-}