diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
index e61f59e3172db..1206424a61e0f 100644
--- a/templates/cassiopeia/scss/blocks/_css-grid.scss
+++ b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -21,6 +21,7 @@
     > [class*=" container-"] {
       width: 100%;
       max-width: none;
+      column-gap: $cassiopeia-grid-gutter;
     }
 
     &:not(.has-sidebar-left) .container-component {
diff --git a/templates/cassiopeia/scss/blocks/_layout.scss b/templates/cassiopeia/scss/blocks/_layout.scss
index 8476c273b7377..21c097d7684b2 100644
--- a/templates/cassiopeia/scss/blocks/_layout.scss
+++ b/templates/cassiopeia/scss/blocks/_layout.scss
@@ -45,7 +45,7 @@
   position: relative;
   > * {
     flex: 1;
-    margin: ($cassiopeia-grid-gutter / 2);
+    margin: ($cassiopeia-grid-gutter / 2) 0;
   }
 
   @include media-breakpoint-down(md) {