From 4928ea2e88cf336368d2e3bfec9b24b1f1179803 Mon Sep 17 00:00:00 2001
From: Rongbin99 <rongbingu999@gmail.com>
Date: Sun, 11 Jan 2026 23:49:51 -0500
Subject: [PATCH] fix: side margins on mobile screens

---
 styles/main.css | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/styles/main.css b/styles/main.css
index b2ae8c8..7bbaf80 100644
--- a/styles/main.css
+++ b/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 {