diff --git a/core/themes/seven/layout.css b/core/themes/seven/layout.css
new file mode 100644
index 0000000..e7ffe18
--- /dev/null
+++ b/core/themes/seven/layout.css
@@ -0,0 +1,26 @@
+.l-container {
+  max-width: 770px;
+  margin: 0 auto;
+  width: 90%;
+}
+
+@media screen and (min-width: 38em) {
+  .l-column {
+    float: left;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .l-column + .l-column {
+    padding-left: 20px;
+  }
+  .l-column--half {
+    width: 50%;
+  }
+  .l-column--quarter {
+    width: 25%;
+  }
+  .l-column--three-quarter {
+    width: 75%;
+  }
+}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 13ca85c..4db7faf 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -6,6 +6,7 @@ version: VERSION
 core: 8.x
 stylesheets:
   screen:
+    - layout.css
     - style.css
 stylesheets-override:
   - vertical-tabs.css
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 9611ad6..d206ba6 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -306,9 +306,6 @@ ul.secondary li.active a.active {
   color: #fff;
   background: #666;
 }
-#content {
-  clear: left;
-}
 @media screen and (max-width:56.538em) { /* 735px */
   .touch #branding {
     padding-right: 0;
@@ -362,23 +359,9 @@ ul.secondary li.active a.active {
 #page {
   background: #fff;
   color: #333;
-  margin-left: 0.8125em;
-  margin-right: 0.8125em;
   padding: 20px 0 40px 0;
   position: relative;
 }
-@media screen and (min-width:28.125em) { /* 450px */
-  #page {
-    margin-left: 1.25em;
-    margin-right: 1.25em;
-  }
-}
-@media screen and (min-width:45em) { /* 720px */
-  #page {
-    margin-left: 2.5em;
-    margin-right: 2.5em;
-  }
-}
 ul.links li,
 ul.inline li {
   padding-right: 1em; /* LTR */
@@ -913,29 +896,6 @@ div.admin-options div.form-item {
 }
 
 /* Maintenance theming */
-body.in-maintenance #sidebar-first {
-  float: left; /* LTR */
-  max-width: 200px;
-  width: 25%;
-}
-body.in-maintenance #content {
-  float: right; /* LTR */
-  max-width: 550px;
-  clear: none;
-  width: 72%;
-}
-body.in-maintenance #page {
-  max-width: 770px;
-  margin: 0 auto;
-  padding-top: 2em;
-  width: 90%;
-}
-body.in-maintenance #branding h1 {
-  max-width: 770px;
-  margin: 0 auto;
-  float: none;
-  width: 90%;
-}
 body.in-maintenance .form-radios .form-type-radio {
   padding: 2px 0;
 }
@@ -951,14 +911,6 @@ body.in-maintenance #logo {
   margin-bottom: 1.5em;
   max-width: 180px;
 }
-@media all and (max-width: 768px) {
-  body.in-maintenance #sidebar-first,
-  body.in-maintenance #content {
-    float: none;
-    max-width: none;
-    width: auto;
-  }
-}
 ol.task-list {
   margin-left: 0; /* LTR */
   list-style-type: none;
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 02af912..825712d 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -25,18 +25,20 @@
   {{ page_top }}
 
   <header id="branding">
-    {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+    <div class="l-container">
+      {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+    </div>
   </header>
 
-  <div id="page">
-    <div id="sidebar-first" class="sidebar">
+  <div id="page" class="l-container">
+    <div id="sidebar-first" class="l-column l-column--quarter sidebar">
       {% if logo %}
         <img id="logo" src="{{ logo }}" alt="{{ site_name }}" />
       {% endif %}
       {{ sidebar_first }}
     </div>
 
-    <main id="content" class="clearfix">
+    <main id="content" class="l-column l-column--three-quarter clearfix">
       {% if messages %}
         <div id="console">{{ messages }}</div>
       {% endif %}
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 3b8294e..b67bf0d 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -72,7 +72,7 @@
     {{ breadcrumb }}
     {{ title_prefix }}
     {% if title %}
-      <h1 class="page-title">{{ title }}</h1>
+      <h1 class="page-title l-container">{{ title }}</h1>
     {% endif %}
     {{ title_suffix }}
     {% if primary_local_tasks %}
@@ -80,7 +80,7 @@
     {% endif %}
   </header>
 
-  <div id="page">
+  <div id="page" class="l-container">
     {% if secondary_local_tasks %}
       <div class="tabs-secondary clearfix" role="navigation">{{ secondary_local_tasks }}</div>
     {% endif %}