diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 40d7d79..e81eaca 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -14,26 +14,6 @@ div.admin-panel .description {
   margin: 0 0 3px;
   padding: 2px 0 3px 0;
 }
-
-div.admin {
-  padding-top: 15px;
-}
-@media screen and (min-width: 40em) {
-  div.admin .left {
-    float: left; /* LTR */
-    width: 47%;
-  }
-  [dir="rtl"] div.admin .left {
-    float: right;
-  }
-  div.admin .right {
-    float: right; /* LTR */
-    width: 47%;
-  }
-  [dir="rtl"] div.admin .right {
-    float: left;
-  }
-}
 div.admin .expert-link {
   text-align: right; /* LTR */
   margin-right: 1em; /* LTR */
diff --git a/core/modules/system/templates/admin-page.html.twig b/core/modules/system/templates/admin-page.html.twig
index 73cae67..989ba57 100644
--- a/core/modules/system/templates/admin-page.html.twig
+++ b/core/modules/system/templates/admin-page.html.twig
@@ -16,8 +16,8 @@
 #}
 <div class="admin clearfix">
   {{ system_compact_link }}
-  {% for position, container in containers %}
-    <div class="{{ position }} clearfix">
+  {% for container in containers %}
+    <div class="layout-column half clearfix">
       {% for block in container.blocks %}
         {{ block }}
       {% endfor %}
diff --git a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
index 077150b..2645bf1 100644
--- a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
+++ b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
@@ -173,6 +173,7 @@ public function testRebuildThemeData() {
       'screen' => array(
         'seven.base.css' => DRUPAL_ROOT . '/core/themes/seven/seven.base.css',
         'style.css' => DRUPAL_ROOT . '/core/themes/seven/style.css',
+        'css/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout.css',
         'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
         'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
         'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
diff --git a/core/themes/seven/css/layout.css b/core/themes/seven/css/layout.css
new file mode 100644
index 0000000..80bb361
--- /dev/null
+++ b/core/themes/seven/css/layout.css
@@ -0,0 +1,35 @@
+.layout-container {
+  margin: 0 1.5em;
+}
+.layout-container:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media screen and (min-width: 38em) {
+  .layout-container {
+    margin: 0 2.5em;
+  }
+  .layout-column {
+    float: left;  /* LTR */
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  [dir="rtl"] .layout-column {
+    float: right;
+  }
+  .layout-column + .layout-column {
+    padding-left: 10px;
+  }
+  .layout-column.half {
+    width: 50%;
+  }
+  .layout-column.quarter {
+    width: 25%;
+  }
+  .layout-column.three-quarter {
+    width: 75%;
+  }
+}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 19ec447..08765cc 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -8,6 +8,7 @@ stylesheets:
   screen:
     - seven.base.css
     - style.css
+    - css/layout.css
     - css/components/buttons.css
     - css/components/buttons.theme.css
     - css/components/dropbutton.component.css
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index f1cb442..32a694a 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -79,19 +79,6 @@ ul.menu li.expanded {
   background-color: #e0e0d8;
   padding: 24px 0 0;
 }
-/* This layout styling is a copy of #page.
- * @TODO: Replace with reuseable layout classes.
- **/
-.branding__inner {
-  margin-left: 1.25em;
-  margin-right: 1.25em;
-}
-@media screen and (min-width:45em) { /* 720px */
-  .branding__inner {
-    margin-left: 2.5em;
-    margin-right: 2.5em;
-  }
-}
 [dir="rtl"] #branding {
   padding: 20px 20px 0 20px;
 }
@@ -164,8 +151,8 @@ ul.menu li.expanded {
 }
 
 /* Span the full width of the viewport */
-.branding__inner .is-horizontal .tabs:before,
-.branding__inner .is-collapse-enabled .tabs:before {
+#branding .is-horizontal .tabs:before,
+#branding .is-collapse-enabled .tabs:before {
   left: -2.5em;
   right: -2.5em;
 }
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index bbc804f..3db4f44 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -64,7 +64,7 @@
  */
 #}
   <header id="branding" class="clearfix">
-    <div class="branding__inner">
+    <div class="layout-container">
       {{ title_prefix }}
       {% if title %}
         <h1 class="page-title">{{ title }}</h1>
@@ -76,7 +76,7 @@
     </div>
   </header>
 
-  <div id="page">
+  <div id="page" class="layout-container">
     {% if secondary_local_tasks %}
       <div class="tabs-secondary clearfix" role="navigation">{{ secondary_local_tasks }}</div>
     {% endif %}
@@ -101,7 +101,7 @@
       {{ page.content }}
     </main>
 
-    <footer id="footer" role="contentinfo">
+    <footer id="footer" role="contentinfo" class="layout-column">
       {{ feed_icons }}
     </footer>