diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css
index 6eb45b51f74..5565dd845fc 100644
--- a/core/themes/bartik/css/base/elements.css
+++ b/core/themes/bartik/css/base/elements.css
@@ -1,6 +1,9 @@
 /* ---------- Overall Specifications ---------- */
-
+html {
+  height: 100%;
+}
 body {
+  min-height: 100%;
   line-height: 1.5;
   word-wrap: break-word;
   margin: 0;
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 97ca1f5e32f..a19cd96f0c4 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -2,6 +2,7 @@
 
 body {
   color: #3b3b3b;
+  background: #292929;
 }
 #page,
 #main-wrapper,
@@ -39,7 +40,6 @@ a:active,
   background-color: #f6f6f2;
   border-color: #f9f9f9;
 }
-#page-wrapper,
 #site-footer__wrapper {
   background: #292929;
 }
diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css
index 9b41285b365..28977ff99e3 100644
--- a/core/themes/bartik/css/components/content.css
+++ b/core/themes/bartik/css/components/content.css
@@ -8,6 +8,46 @@ h1#page-title {
   font-size: 2em;
   line-height: 1;
 }
+.main-content .section {
+  padding: 0 15px;
+}
+@media all and (min-width: 851px) {
+  .main-content {
+    float: left; /* LTR */
+    position: relative;
+  }
+  [dir="rtl"] .main-content {
+    float: right;
+  }
+  .layout-two-sidebars .main-content {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 50%;
+  }
+  .layout-one-sidebar .main-content {
+    width: 75%;
+  }
+  .layout-no-sidebars .main-content {
+    width: 100%;
+  }
+  .layout-sidebar-first .main-content {
+    margin-left: 25%; /* LTR */
+    margin-right: 0; /* LTR */
+  }
+  [dir="rtl"] .layout-sidebar-first .main-content {
+    margin-left: 0;
+    margin-right: 25%;
+  }
+  .layout-sidebar-second .main-content {
+    margin-right: 25%; /* LTR */
+    margin-left: 0; /* LTR */
+  }
+  [dir="rtl"] .layout-sidebar-second .main-content {
+    margin-right: 0;
+    margin-left: 25%;
+  }
+}
+
 #content h2 {
   margin-bottom: 2px;
   font-size: 1.429em;
diff --git a/core/themes/bartik/css/components/featured-bottom.css b/core/themes/bartik/css/components/featured-bottom.css
index 6fdb71a13e0..07f2a5c1845 100644
--- a/core/themes/bartik/css/components/featured-bottom.css
+++ b/core/themes/bartik/css/components/featured-bottom.css
@@ -5,6 +5,38 @@
   background: rgba(30, 50, 10, 0.08);
   border-top: 1px solid #e7e7e7;
 }
+.region-featured-bottom-first,
+.region-featured-bottom-second,
+.region-featured-bottom-third {
+  box-sizing: border-box;
+  padding: 0 20px 0;
+}
+@media all and (min-width: 560px) {
+  .region-featured-bottom-first,
+  .region-featured-bottom-second,
+  .region-featured-bottom-third {
+    float: left; /* LTR */
+    position: relative;
+    box-sizing: border-box;
+    padding: 20px 15px 30px;
+    width: 33%;
+  }
+  [dir="rtl"] .region-featured-bottom-first,
+  [dir="rtl"] .region-featured-bottom-second,
+  [dir="rtl"] .region-featured-bottom-third {
+    float: right;
+  }
+  .region-featured-bottom-second {
+    padding: 20px 5px 30px;
+  }
+}
+@media all and (min-width: 851px) {
+  .region-featured-bottom-first,
+  .region-featured-bottom-second,
+  .region-featured-bottom-third {
+    padding: 0 20px;
+  }
+}
 #featured-bottom h2 {
   color: #000;
   font-size: 1.4em;
diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
index 4dca1ff1a6e..0d7727d3bf7 100644
--- a/core/themes/bartik/css/components/footer.css
+++ b/core/themes/bartik/css/components/footer.css
@@ -2,6 +2,45 @@
 
 #site-footer__wrapper {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 35px 15px 30px;
+}
+.region-footer-first,
+.region-footer-second,
+.region-footer-third,
+.region-footer-fourth,
+.region-footer-fifth {
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+@media all and (min-width: 560px) {
+  .region-footer-first,
+  .region-footer-second,
+  .region-footer-third,
+  .region-footer-fourth {
+    float: left; /* LTR */
+    position: relative;
+    width: 50%;
+  }
+  [dir="rtl"] .region-footer-first,
+  [dir="rtl"] .region-footer-second,
+  [dir="rtl"] .region-footer-third,
+  [dir="rtl"] .region-footer-fourth {
+    float: right;
+  }
+  .region-footer-third {
+    clear: both;
+  }
+}
+@media all and (min-width: 851px) {
+  .region-footer-first,
+  .region-footer-second,
+  .region-footer-third,
+  .region-footer-fourth {
+    width: 25%;
+  }
+  .region-footer-third {
+    clear: none;
+  }
 }
 #site-footer__wrapper .block .content {
   color: #c0c0c0;
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index 0d4cb58dcb6..8d1bd19343a 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -2,6 +2,26 @@
 #header {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.header .section {
+  position: relative;
+}
+.region-header {
+  float: right; /* LTR */
+  margin: .5em 5px .75em;
+}
+[dir="rtl"] .region-header {
+  float: left;
+}
+@media all and (min-width: 461px) and (max-width: 900px) {
+  .region-header {
+    margin: .5em 5px .75em;
+  }
+}
+@media all and (min-width: 901px) {
+  .region-header {
+    margin: 1em 5px 1.5em;
+  }
+}
 #logo,
 .site-logo {
   float: left; /* LTR */
diff --git a/core/themes/bartik/css/components/sidebar.css b/core/themes/bartik/css/components/sidebar.css
index 7f1d5d83300..8b56352456c 100644
--- a/core/themes/bartik/css/components/sidebar.css
+++ b/core/themes/bartik/css/components/sidebar.css
@@ -1,7 +1,43 @@
 /* ------------------ Sidebar ----------------- */
 
+@media all and (min-width: 560px) {
+  .sidebar {
+    float: left; /* LTR */
+    position: relative;
+    width: 50%;
+  }
+  [dir="rtl"] .sidebar {
+    float: right;
+  }
+  .layout-one-sidebar .sidebar {
+    width: 100%;
+  }
+}
+@media all and (min-width: 851px) {
+  .layout-one-sidebar .sidebar {
+    width: 25%;
+  }
+  #sidebar-first {
+    width: 25%;
+    margin-left: -100%; /* LTR */
+  }
+  [dir="rtl"] #sidebar-first {
+    margin-right: -100%;
+    margin-left: 0;
+  }
+  #sidebar-second {
+    width: 25%;
+    margin-left: -25%; /* LTR */
+    clear: none;
+  }
+  [dir="rtl"] #sidebar-second {
+    margin-right: -25%;
+    margin-left: 0;
+  }
+}
+
 .sidebar .section {
-  padding-top: 10px;
+  padding: 10px 15px 0;
 }
 .sidebar .block {
   border-style: solid;
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index bd1b2302f0c..bb234340790 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -1,243 +1,29 @@
+/**
+ * @file
+ * Bartik layout styling.
+ */
 
-/* ---------- Basic Layout Styles ----------- */
-
-html,
-body,
-#page  {
-  height: 100%;
-}
-#page-wrapper {
-  min-height: 100%;
-}
-#header div.section,
-.featured-top__inner,
-#messages div.section,
-#main,
-#featured-bottom,
-#footer-columns,
-#site-footer__bottom {
-  width: 100%;
+/**
+ * Container
+ */
+.layout-container {
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
 }
-#header div.section {
-  position: relative;
-}
-.region-header {
-  float: right; /* LTR */
-  margin: .5em 5px .75em;
-}
-[dir="rtl"] .region-header {
-  float: left;
-}
-@media all and (min-width: 461px) and (max-width: 900px) {
-  .region-header {
-    margin: .5em 5px .75em;
-  }
-}
-@media all and (min-width: 901px) {
-  .region-header {
-    margin: 1em 5px 1.5em;
-  }
-}
-.region-secondary-menu .block-menu {
-  width: 100%;
-  margin: 0 auto;
-}
-#main-wrapper {
-  min-height: 300px;
-}
-#content .section,
-.sidebar .section {
-  padding: 0 15px;
-}
-#site-footer__wrapper {
-  padding: 35px 15px 30px;
-  box-sizing: border-box;
-}
-.region-featured-bottom-first,
-.region-featured-bottom-second,
-.region-featured-bottom-third {
-  box-sizing: border-box;
-  padding: 0 20px 0;
-}
-.region-footer-first,
-.region-footer-second,
-.region-footer-third,
-.region-footer-fourth,
-.region-footer-fifth {
-  box-sizing: border-box;
-  padding: 0 10px;
-}
-
-@media all and (min-width: 560px) and (max-width: 850px) {
-
-  #sidebar-first,
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third,
-  .region-footer-first,
-  .region-footer-second,
-  .region-footer-third,
-  .region-footer-fourth {
-    display: inline;
-    float: left; /* LTR */
-    position: relative;
-  }
-  [dir="rtl"] #sidebar-first,
-  [dir="rtl"] .region-featured-bottom-first,
-  [dir="rtl"] .region-featured-bottom-second,
-  [dir="rtl"] .region-featured-bottom-third,
-  [dir="rtl"] .region-footer-first,
-  [dir="rtl"] .region-footer-second,
-  [dir="rtl"] .region-footer-third,
-  [dir="rtl"] .region-footer-fourth {
-    float: right;
-  }
-  #sidebar-first,
-  #sidebar-second {
-    width: 50%;
-  }
-  #sidebar-second {
-    margin-left: 50%; /* LTR */
-  }
-  [dir="rtl"] #sidebar-second {
-    margin-right: 50%;
-  }
-  .layout-one-sidebar #sidebar-first,
-  .layout-one-sidebar #sidebar-second {
-    width: 100%;
-  }
-  .layout-one-sidebar #sidebar-second {
-    margin-left: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-one-sidebar #sidebar-second {
-    margin-right: 0;
-  }
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third {
-    box-sizing: border-box;
-    padding: 20px 15px 30px;
-    width: 33%;
-  }
-  .region-featured-bottom-second {
-    padding: 20px 5px 30px;
-  }
-  .region-footer-first,
-  .region-footer-second {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 50%;
-  }
-  .region-footer-third,
-  .region-footer-fourth {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 50%;
-  }
-  .region-footer-thirdcolumn {
-    clear: both;
-  }
-}
-
 @media all and (min-width: 851px) {
-
-  #header div.section,
-  .featured-top__inner,
-  #messages div.section,
-  #main,
-  #featured-bottom,
-  #footer-columns,
-  #site-footer__bottom {
+  .layout-container {
     max-width: 1290px;
   }
-  #content,
-  #sidebar-first,
-  #sidebar-second,
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third,
-  .region-footer-first,
-  .region-footer-second,
-  .region-footer-third,
-  .region-footer-fourth {
-    display: inline;
-    float: left; /* LTR */
-    position: relative;
-  }
-  [dir="rtl"] #content,
-  [dir="rtl"] #sidebar-first,
-  [dir="rtl"] #sidebar-second,
-  [dir="rtl"] .region-featured-bottom-first,
-  [dir="rtl"] .region-featured-bottom-second,
-  [dir="rtl"] .region-featured-bottom-third,
-  [dir="rtl"] .region-footer-first,
-  [dir="rtl"] .region-footer-second,
-  [dir="rtl"] .region-footer-third,
-  [dir="rtl"] .region-footer-fourth {
-    float: right;
-  }
-  .layout-two-sidebars #content {
-    margin-left: 25%;
-    margin-right: 25%;
-    width: 50%;
-  }
-  .layout-one-sidebar #content {
-    width: 75%;
-  }
-  .layout-no-sidebars #content {
-    width: 100%;
-  }
-  .layout-sidebar-first #content {
-    margin-left: 25%; /* LTR */
-    margin-right: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-sidebar-first #content {
-    margin-left: 0;
-    margin-right: 25%;
-  }
-  .layout-sidebar-second #content {
-    margin-right: 25%; /* LTR */
-    margin-left: 0; /* LTR */
-  }
-  [dir="rtl"] .layout-sidebar-second #content {
-    margin-right: 0;
-    margin-left: 25%;
-  }
-  #sidebar-first {
-    width: 25%;
-    margin-left: -100%; /* LTR */
-  }
-  [dir="rtl"] #sidebar-first {
-    margin-right: -100%;
-  }
-  #sidebar-second {
-    width: 25%;
-    margin-left: -25%; /* LTR */
-    clear: none;
-  }
-  [dir="rtl"] #sidebar-second {
-    margin-right: -25%;
-  }
-  .region-featured-bottom-first,
-  .region-featured-bottom-second,
-  .region-featured-bottom-third {
-    width: 33%;
-  }
-  .region-footer-first,
-  .region-footer-second,
-  .region-footer-third,
-  .region-footer-fourth {
-    box-sizing: border-box;
-    padding: 0 10px;
-    width: 25%;
-  }
 }
-/* ------------------- Main ------------------- */
 
-#main {
+/**
+ * Main
+ */
+.layout-main-wrapper {
+  min-height: 300px;
+}
+.layout-main {
   margin-top: 20px;
   margin-bottom: 40px;
 }
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 04ffe94c576..0a20edee02a 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -74,8 +74,8 @@
 #}
 <div id="page-wrapper">
   <div id="page">
-    <header id="header" role="banner" aria-label="{{ 'Site header'|t}}">
-      <div class="section clearfix">
+    <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
+      <div class="section layout-container clearfix">
         {{ page.secondary_menu }}
         {% if logo %}
           <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
@@ -112,15 +112,15 @@
     {{ page.messages }}
     {% if page.featured_top %}
       <div class="featured-top">
-        <aside class="featured-top__inner clearfix" role="complementary">
+        <aside class="featured-top__inner section layout-container clearfix" role="complementary">
           {{ page.featured_top }}
         </aside>
       </div>
     {% endif %}
-    <div id="main-wrapper" class="clearfix">
-      <div id="main" class="clearfix">
+    <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
+      <div id="main" class="layout-main clearfix">
         {{ page.breadcrumb }}
-        <main id="content" class="column" role="main">
+        <main id="content" class="column main-content" role="main">
           <section class="section">
             <a id="main-content" tabindex="-1"></a>
             {{ title_prefix }}
@@ -160,7 +160,7 @@
     </div>
     {% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
       <div id="featured-bottom-wrapper">
-        <aside id="featured-bottom" class="clearfix" role="complementary">
+        <aside id="featured-bottom" class="section layout-container clearfix" role="complementary">
           {{ page.featured_bottom_first }}
           {{ page.featured_bottom_second }}
           {{ page.featured_bottom_third }}
@@ -168,7 +168,7 @@
       </div>
     {% endif %}
     <div id="site-footer__wrapper">
-      <footer class="site-footer">
+      <footer class="site-footer section layout-container">
         {% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
           <div id="footer-columns" class="clearfix">
             {{ page.footer_first }}