Fix Side Margins for Mobile (#40)

This PR fixes the side margins to allow content to be properly displayed
on mobile screens. This regression was caused by
#38

Changes:

- Implements mobile-first responsive padding for article.x\:container
using media queries
- Scales padding from 1rem on mobile to 10rem on large desktop screens
- Uses standard responsive breakpoints (768px, 1024px, 1280px)

Co-authored-by: Rongbin99 <rongbingu999@gmail.com>

Author: Kokonutic

styles/main.css

@@ -138,8 +138,32 @@ article {
 /* content container */
 article.x\:container {
   max-width: 1200px !important;
-  padding-left: 10rem !important;
-  padding-right: 10rem !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+/* Tablet and larger */
+@media (min-width: 768px) {
+  article.x\:container {
+    padding-left: 4rem !important;
+    padding-right: 4rem !important;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  article.x\:container {
+    padding-left: 8rem !important;
+    padding-right: 8rem !important;
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1280px) {
+  article.x\:container {
+    padding-left: 10rem !important;
+    padding-right: 10rem !important;
+  }
 }
 
 .site-footer-text {