Left-align content.

Aligning the content to the left allows for a more consistent experience
while resizing.

public/css/style.css

@@ -25,18 +25,17 @@ html, body {
     color: var(--color-text);
 	background: var(--color-background);
 	font-family: sans-serif;
-	padding: 0;
     min-height: 100%;
+    margin: 0;
 }
 
 html {
-    margin: 0;
     height: 100%;
 }
 
 body {
+    padding: .5rem;
     height: 100%;
-    margin: 0 auto;
     display: grid;
     grid-template:
         "header" 7rem 
@@ -117,13 +116,12 @@ article {
 @media only screen and (max-width: 1000px) {
     body {
         width: 100%;
-        padding: 0 1rem;
     }
 }
 
 @media only screen and (min-width: 1000px) {
     body {
-        width: 80%;
+        width: 70%;
     }
 }
 

src/css/style.css

@@ -25,18 +25,17 @@ html, body {
     color: var(--color-text);
 	background: var(--color-background);
 	font-family: sans-serif;
-	padding: 0;
     min-height: 100%;
+    margin: 0;
 }
 
 html {
-    margin: 0;
     height: 100%;
 }
 
 body {
+    padding: .5rem;
     height: 100%;
-    margin: 0 auto;
     display: grid;
     grid-template:
         "header" 7rem 
@@ -121,13 +120,12 @@ article {
 @media only screen and (max-width: 1000px) {
     body {
         width: 100%;
-        padding: 0 1rem;
     }
 }
 
 @media only screen and (min-width: 1000px) {
     body {
-        width: 80%;
+        width: 70%;
     }
 }