♻️ refactor: standarise left/right margins

sass/main.scss

@@ -40,7 +40,7 @@
 :root {
   --max-layout-width: 1000px;
   --normal-layout-width: 600px;
-  --medium-layout-width: 350px;
+  --medium-layout-width: 400px;
   --small-layout-width: 200px;
 
   --sans-serif-font: 'Inter', Helvetica, Arial, sans-serif;
@@ -98,7 +98,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  margin: 0;
+  margin: 0 12px;
   padding: 0;
 }
 
@@ -116,10 +116,6 @@ article {
   margin: 0 auto;
 }
 
-main {
-  padding: 0 24px;
-}
-
 .section-title {
   display: block;
   font-size: 2.2em;
@@ -192,13 +188,16 @@ p {
   .content {
     max-width: var(--normal-layout-width);
   }
+  body {
+    margin: 0 32px;
+  }
 }
 @media only screen and (max-width: 600px) {
   .content {
     max-width: var(--medium-layout-width);
   }
-  main {
+  body {
-    padding: 0;
+    margin: 0 16px;
   }
 }
 @media only screen and (max-width: 300px) {

sass/parts/_header.scss

@@ -37,7 +37,7 @@ header {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: 1em 24px;
+  padding: 1em 0;
   margin: 0 auto;
 }
 
@@ -118,7 +118,6 @@ header {
 
   .navbar {
     max-width: var(--medium-layout-width);
-    padding: 1em 0;
   }
 }