diff --git a/new_site/src/griddy.css b/new_site/src/griddy.css
index 407c401..8abf3f8 100644
--- a/new_site/src/griddy.css
+++ b/new_site/src/griddy.css
@@ -35,7 +35,19 @@ body {
 
 h1 {
     text-align: center;
-    margin: 1.5em 0;
+    width: 90%;
+    margin: 1.5em auto;
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    h1 {
+        max-width: 60%;
+    }
+}
+@media (min-width: 992px) {
+    h1 {
+        max-width: 40%;
+    }
 }
 
 /* Blinking cursor */
@@ -73,9 +85,15 @@ a:hover {
 
 .center {
     text-align: center;
-    width: 70%;
+    width: 90%;
     margin: 1em auto 0;
 }
+/* Larger Devices */
+@media (min-width: 700px) {
+    .center {
+        max-width: 60%;
+    }
+}
 @media (min-width: 992px) {
     .center {
         max-width: 40%;
@@ -104,10 +122,15 @@ code a {
 }
 
 .row {
-    width: 70%;
+    width: 90%;
     margin: 0 auto;
 }
-
+/* Larger Devices */
+@media (min-width: 700px) {
+    .row {
+        max-width: 60%;
+    }
+}
 /* Large Devices */
 @media (min-width: 992px) {
     .row {
@@ -140,13 +163,19 @@ code a {
 hr {
     --hr-color: var(--accent);
 
-    width: 70%;
+    width: 90%;
     height: 1px;
     margin: 2.35em auto;
     border-width: 0;
     color: var(--hr-color);
     background-color: var(--hr-color);
 }
+/* Larger Devices */
+@media (min-width: 700px) {
+    hr {
+        max-width: 60%;
+    }
+}
 /* Large Devices */
 @media (min-width: 992px) {
     hr {