diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss
index 8498ec25..2ed294d6 100644
--- a/scss/elements/_panels.scss
+++ b/scss/elements/_panels.scss
@@ -9,6 +9,11 @@
   border-bottom-width: 1px;
   border-top-style: solid;
   border-bottom-style: solid;
+  margin-bottom: $site-margins-mobile * 2;
+
+  @include media($medium-screen) {
+    margin-bottom: $site-margins * 2;
+  }
 }
 
 @mixin panel-theme-default {
@@ -20,3 +25,22 @@
   @include panel-base;
   @include panel-theme-default;
 }
+
+/*
+ * Panel Container
+ * Grid container for panel blocks
+ */
+
+.panel-container {
+  @include grid-row;
+  @include grid-pad;
+  @include margin(($site-margins-mobile * 2) null);
+
+  @include media($medium-screen) {
+    @include margin(($site-margins * 2) null);
+  }
+
+  > .col {
+    @include grid-pad;
+  }
+}
diff --git a/scss/sections/_main.scss b/scss/sections/_main.scss
index a4159054..063b70e7 100644
--- a/scss/sections/_main.scss
+++ b/scss/sections/_main.scss
@@ -1,11 +1,3 @@
-.container {
-  @include margin(($site-margins-mobile * 2) null);
-
-  @include media($medium-screen) {
-    @include margin(($site-margins * 2) null);
-  }
-}
-
 section {
   margin-bottom: 10rem;
 }
diff --git a/templates/base.html.to b/templates/base.html.to
index 41d569b6..dca55fe8 100644
--- a/templates/base.html.to
+++ b/templates/base.html.to
@@ -13,7 +13,7 @@
 
   {% include 'header.html.to' %}
 
-  <div class='container'>
+  <div class='panel-container'>
     {% block content %}
       these are not the droids you are looking for
     {% end %}