diff --git a/assets/css/styles.css b/assets/css/styles.css
index 4715de9..ce5eafc 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -959,12 +959,85 @@ ul{
   list-style-type: disc;
 }
 
+@media (min-width: 280px){
+  .min-\[280px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 320px){
+  .min-\[320px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .min-\[320px\]\:px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 340px){
+  .min-\[340px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 380px){
+  .min-\[380px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 400px){
+  .min-\[400px\]\:px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 420px){
+  .min-\[420px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 460px){
+  .min-\[460px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 480px){
+  .min-\[480px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+@media (min-width: 520px){
+  .min-\[520px\]\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
 @media (min-width: 640px){
   .sm\:mx-28{
     margin-left: 7rem;
     margin-right: 7rem;
   }
 
+  .sm\:mx-8{
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
   .sm\:flex{
     display: flex;
   }
@@ -1005,6 +1078,11 @@ ul{
     padding-right: 1rem;
   }
 
+  .sm\:px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:text-3xl{
     font-size: 1.875rem;
     line-height: 2.25rem;
diff --git a/events.html b/events.html
index d23671a..e1d1261 100644
--- a/events.html
+++ b/events.html
@@ -4,7 +4,7 @@
 description: a list of our events
 portfolio_title: events portfolio.
 ---
-<header class="mx-8 my-28">
+<header class="min-[340px]:mx-8 my-28">
     <h1>{{ page.title }}</h1>
 </header>
 
@@ -33,7 +33,7 @@ <h1>{{ page.title }}</h1>
 </div>
 
 <div class="m-8 bg-black text-white">
-    <header class="py-14 px-8">
+    <header class="py-14 min-[400px]:px-8">
         <h1>{{ page.portfolio_title }}</h1>
     </header>
     
diff --git a/people.html b/people.html
index 3ae9ba2..721a52d 100644
--- a/people.html
+++ b/people.html
@@ -31,7 +31,7 @@ <h1>{{ page.title }}</h1>
 </div>
 
 
-<h1 class="mx-8 mb-28">
+<h1 class="min-[460px]:mx-8 mb-28">
     the communities.
 </h1>