diff --git a/components/cards-public-page.html b/components/cards-public-page.html
index d65fb78..16e007f 100644
--- a/components/cards-public-page.html
+++ b/components/cards-public-page.html
@@ -10,7 +10,7 @@
 
   <h1 class="sg-main-heading">Components – Cards Public Page</h1>
 
-  <main aria-label="Cards Public Page">
+  <main aria-label="Cards Public Page" class="sg-cards-public-page__main">
 
     <section id="component-content-wrapper-card">
       <p class="sg-preview-label">Component: Content Wrapper Card</p>
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index f60fa6c..a4c568d 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -226,16 +226,25 @@
   width: 100%;
 }
 
+.sg-page-cards-public-page {
+  padding: 0;
+}
+
+.sg-page-cards-public-page > .sg-main-heading {
+  margin: 0 0 var(--spacing-large) 0;
+  padding-inline: var(--spacing-small);
+}
+
+.sg-page-cards-public-page .sg-cards-public-page__main {
+  width: 100%;
+}
+
 .sg-page-cards .sg-preview-area > .sg-card,
 .sg-page-cards .sg-preview-area > .sg-transparent-card {
   width: 100%;
   max-width: none;
 }
 
-.sg-page-cards-public-page #component-content-wrapper-card {
-  margin-inline: calc(-1 * var(--spacing-small));
-}
-
 .sg-page-cards-public-page #component-content-wrapper-card > .sg-transparent-card {
   width: 100%;
   max-width: none;