diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html
index af6a826..230a3d3 100644
--- a/site/layouts/partials/about.html
+++ b/site/layouts/partials/about.html
@@ -1,4 +1,6 @@
-<article id="about" class="container max-w-full w-full h-screen bg-gray-300">
-  <h2>About</h2>
+<article id="about" class="l-relative l-screen-full">
+  <div class="l-wrapper">
+    <h2>About</h2>
+  </div>
 </article>
 
diff --git a/site/layouts/partials/contact.html b/site/layouts/partials/contact.html
index 0d58768..289e5df 100644
--- a/site/layouts/partials/contact.html
+++ b/site/layouts/partials/contact.html
@@ -1,22 +1,24 @@
-<article id="contact" class="container max-w-full w-full h-screen bg-gray-700">
-  <h2>Contact</h2>
-  <form>
-    <ul>
-      <li>
-        <label for="name">Name</label>
-        <input id="name" type="text" name="user_name">
-      </li>
-      <li>
-        <label for="mail">E-mail:</label>
-        <input id="mail" type="email" name="user_email">
-      </li>
-      <li>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-      </li>
-      <li>
-        <button id="js-form-send" type="button">Send</button>
-      </li>
-    </ul>
-  </form>
+<article id="contact" class="l-relative l-screen-full">
+  <div class="l-wrapper">
+    <h2>Contact</h2>
+    <form>
+      <ul class="u-no-list">
+        <li>
+          <label for="name">Name</label>
+          <input id="name" type="text" name="user_name">
+        </li>
+        <li>
+          <label for="mail">E-mail:</label>
+          <input id="mail" type="email" name="user_email">
+        </li>
+        <li>
+          <label for="msg">Message:</label>
+          <textarea id="msg" name="user_message"></textarea>
+        </li>
+        <li>
+          <button id="js-form-send" type="button">Send</button>
+        </li>
+      </ul>
+    </form>
+  </div>
 </article>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index ae6cfa7..c6ac64b 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,6 +1,8 @@
 <footer class="transition-fade">
-  <ul>
-    <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-    <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
-  </ul>
+  <div class="l-wrapper">
+    <ul class="u-no-list l-flex l-flex-row">
+      <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
+      <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
+    </ul>
+  </div>
 </footer>
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index a64ad95..a0e9fa1 100644
--- a/site/layouts/partials/header.html
+++ b/site/layouts/partials/header.html
@@ -1,10 +1,12 @@
 <header>
-  <nav>
-    <ul>
-      <li><a href="{{ .Site.BaseURL }}">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#services">Services</a></li>
-      <li><a href="#contact">Contact</a></li>
-    </ul>
-  </nav>
+  <div class="l-wrapper">
+    <nav>
+      <ul class="u-no-list l-flex l-flex-row">
+        <li><a href="{{ .Site.BaseURL }}">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+  </div>
 </header>
diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html
index d0ff173..7066fce 100644
--- a/site/layouts/partials/hero.html
+++ b/site/layouts/partials/hero.html
@@ -1,5 +1,5 @@
 <article id="home">
-  <div id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
+  <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden">
     {{ partial "blocks.html" . }}
   </div>
 </article>
diff --git a/site/layouts/partials/services.html b/site/layouts/partials/services.html
index 3bde92f..906ee5c 100644
--- a/site/layouts/partials/services.html
+++ b/site/layouts/partials/services.html
@@ -1,4 +1,6 @@
-<article id="services" class="container max-w-full w-full h-screen bg-gray-500">
-  <h2>Services</h2>
+<article id="services" class="l-relative l-screen-full">
+  <div class="l-wrapper">
+    <h2>Services</h2>
+  </div>
 </article>
 
diff --git a/src/css/imports/blocks.scss b/src/css/imports/blocks.scss
index c013971..e3c1aab 100644
--- a/src/css/imports/blocks.scss
+++ b/src/css/imports/blocks.scss
@@ -23,6 +23,10 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
   z-index: 1;
   position: relative;
   overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
   &::before {
     //will-change: transform;
     z-index: 1;
diff --git a/src/css/imports/layout.scss b/src/css/imports/layout.scss
new file mode 100644
index 0000000..8f47b73
--- /dev/null
+++ b/src/css/imports/layout.scss
@@ -0,0 +1,51 @@
+.l-wrapper {
+  width: 100%;
+  max-width: 90rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// #position
+
+.l-absolute {
+  position: absolute;
+}
+
+.l-relative {
+  position: relative;
+}
+
+// #sizes
+
+.l-screen-full {
+  width: 100%;
+  height: 100vh;
+}
+
+// #flex
+
+.l-flex {
+  display: flex;
+}
+
+.l-flex-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.l-justify-around {
+  justify-content: space-around;
+}
+
+.l-flex-column {
+  flex-direction: column;
+}
+
+.l-flex-row {
+  flex-direction: row;
+}
+
+.l-flex-wrap {
+  flex-wrap: wrap;
+}
+
diff --git a/src/css/imports/reset.css b/src/css/imports/reset.css
index 6b1a1ac..ab6c292 100644
--- a/src/css/imports/reset.css
+++ b/src/css/imports/reset.css
@@ -4,3 +4,7 @@ html,
 body {
   height: 100%;
 }
+
+html {
+  box-sizing: border-box;
+}
diff --git a/src/css/imports/utility.scss b/src/css/imports/utility.scss
new file mode 100644
index 0000000..3304ccf
--- /dev/null
+++ b/src/css/imports/utility.scss
@@ -0,0 +1,10 @@
+.u-overflow-hidden {
+  overflow: hidden;
+}
+
+// #lists
+.u-no-list {
+  list-style: none;
+  padding-left: 0;
+}
+
diff --git a/src/css/main.css b/src/css/main.css
index c9b1b75..d54953d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,8 +1,12 @@
 @import "imports/reset.css";
 @import "milligram";
+
+@import "imports/layout.scss";
+@import "imports/utility.scss";
 @import "imports/mixins.scss";
 @import "imports/blocks.scss";
 
+// fonts
 body {
   font-family: "Montserrat", sans-serif;
 }