diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 3668c7ea15..3307dfd5d9 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -55,7 +55,7 @@
 
 .content-header {
   overflow: hidden;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   padding: 1.5rem 0 0;
   background-color: #f3f4f9;
 }
diff --git a/core/themes/claro/css/components/content-header.pcss.css b/core/themes/claro/css/components/content-header.pcss.css
index c82370be79..81a6003920 100644
--- a/core/themes/claro/css/components/content-header.pcss.css
+++ b/core/themes/claro/css/components/content-header.pcss.css
@@ -6,7 +6,7 @@
 
 .content-header {
   overflow: hidden;
-  margin-bottom: 2rem;
-  padding: 1.5rem 0 0;
+  margin-bottom: var(--space-m);
+  padding: var(--space-l) 0 0;
   background-color: var(--color-whitesmoke);
 }
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index cb7464f0e0..767737bfd1 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -59,10 +59,6 @@
   */ /* 48px */
 }
 
-.tabs-wrapper {
-  display: flex;
-}
-
 .tabs-wrapper > nav {
   width: 100%;
 }
@@ -253,6 +249,9 @@ rgba(216, 217, 224, 0.8);
 }
 
 @media screen and (min-width: 48em) {
+  .tabs-wrapper {
+    display: flex;
+  }
   .is-horizontal .tabs {
     flex-direction: row;
     width: auto;
@@ -263,16 +262,14 @@ rgba(216, 217, 224, 0.8);
 
   .is-horizontal .tabs--secondary {
     overflow: hidden;
-    margin-right: -6px;
-    margin-bottom: 1rem;
-    margin-left: -6px;
+    margin: -6px -6px 0;
     padding: 6px 6px 0;
     border-radius: 0;
   }
 
   .is-horizontal .tabs--secondary::after {
     position: absolute;
-    bottom: 1rem;
+    bottom: 0;
     left: 0;
     display: block;
     width: 100%;
diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css
index 4e7cefb66b..8a73088837 100644
--- a/core/themes/claro/css/components/tabs.pcss.css
+++ b/core/themes/claro/css/components/tabs.pcss.css
@@ -19,9 +19,6 @@
   --tabs--hover-bg-color: #e6ecf8;
 }
 
-.tabs-wrapper {
-  display: flex;
-}
 .tabs-wrapper > nav {
   width: 100%;
 }
@@ -175,6 +172,9 @@
 }
 
 @media screen and (min-width: 48em) {
+  .tabs-wrapper {
+    display: flex;
+  }
   .is-horizontal .tabs {
     flex-direction: row;
     width: auto;
@@ -185,16 +185,14 @@
 
   .is-horizontal .tabs--secondary {
     overflow: hidden;
-    margin-right: calc(calc(var(--tabs--focus-height) + 3px) * -1);
-    margin-bottom: var(--space-m);
-    margin-left: calc(calc(var(--tabs--focus-height) + 3px) * -1);
+    margin: calc(calc(var(--tabs--focus-height) + 3px) * -1) calc(calc(var(--tabs--focus-height) + 3px) * -1) 0;
     padding: calc(var(--tabs--focus-height) + 3px) calc(var(--tabs--focus-height) + 3px) 0;
     border-radius: 0;
   }
 
   .is-horizontal .tabs--secondary::after {
     position: absolute;
-    bottom: var(--space-m);
+    bottom: 0;
     left: 0;
     display: block;
     width: 100%;
diff --git a/core/themes/claro/css/layout/layout.css b/core/themes/claro/css/layout/layout.css
index 601de6b6f9..aabb3b1113 100644
--- a/core/themes/claro/css/layout/layout.css
+++ b/core/themes/claro/css/layout/layout.css
@@ -4,15 +4,26 @@
  * https://www.drupal.org/node/2815083
  * @preserve
  */
+
 /**
- * Add spacing to bottom of pages
+ * Add spacing to top and bottom of pages.
  */
+
 .page-content {
+  margin-top: 1.5rem;
   margin-bottom: 80px;
 }
+
+@media screen and (min-width: 38em) {
+  .page-content {
+    margin-top: 2rem;
+  }
+}
+
 /**
  * Add color to layout icons.
  */
+
 .layout-icon__region {
   fill: #f5f5f2;
   stroke: #666;
diff --git a/core/themes/claro/css/layout/layout.pcss.css b/core/themes/claro/css/layout/layout.pcss.css
index 39649e43c1..17e012274e 100644
--- a/core/themes/claro/css/layout/layout.pcss.css
+++ b/core/themes/claro/css/layout/layout.pcss.css
@@ -1,10 +1,18 @@
 /**
- * Add spacing to bottom of pages
+ * Add spacing to top and bottom of pages.
  */
+
 .page-content {
+  margin-top: 1.5rem;
   margin-bottom: 80px;
 }
 
+@media screen and (min-width: 38em) {
+  .page-content {
+    margin-top: 2rem;
+  }
+}
+
 /**
  * Add color to layout icons.
  */