diff --git a/public/css/home.css b/public/css/home.css
index b4d5bcc..1178c95 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -69,16 +69,17 @@
 }
 
 /* Grid Pattern */
+.home-grid-container {
+  padding: 0 15% 2rem 15%;
+}
 .home-grid {
   display: grid;
   aspect-ratio: 1 / 1;
   width: 100%;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  padding: 1rem;
   box-sizing: border-box;
 }
-
 .home-grid svg {
   width: 100%;
   height: 100%;
@@ -87,7 +88,7 @@
 
 /* -md */
 @media (min-width: 992px) {
-  .home-grid {
+  .home-grid-container {
     padding: 0;
   }
 }
\ No newline at end of file
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 9fb1e39..0418f79 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -36,22 +36,24 @@
   <main>
     <div class="container flex-adaptive">
       <div class="flex-1">Text</div>
-      <div class="flex-1 home-grid">
-        <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
-        <div class="fill-background fill-black diamond"></div>
-        <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
+      <div class="flex-1 home-grid-container">
+        <div class="home-grid">
+          <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
+          <div class="fill-background fill-black diamond"></div>
+          <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
 
-        <div class="fill fill-tan">
-          {% squareSvg 10 %}
-        </div>
-        <div class="fill-background fill-lightblue border-round border-round-2"></div>
-        <div class="fill-background fill-brown border-round-2 border-round-br"></div>
+          <div class="fill fill-tan">
+            {% squareSvg 10 %}
+          </div>
+          <div class="fill-background fill-lightblue border-round border-round-2"></div>
+          <div class="fill-background fill-brown border-round-2 border-round-br"></div>
 
-        <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
-        <div class="fill fill-lightblue">
-          {% triangleSvg 12 %}
+          <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
+          <div class="fill fill-lightblue">
+            {% triangleSvg 12 %}
+          </div>
+          <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
         </div>
-        <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
       </div>
     </div>
   </main>