diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index f5494deb0..c6e74dd24 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -997,13 +997,15 @@ main#main {
 .split-comparison {
   position: relative;
   width: 100%;
-  max-width: 540px;
-  /* 20px padding acts as an invisible hover buffer so the divider does
-     not immediately snap back when the pointer grazes the box edge.
-     Negative top/bottom margins collapse the padding out of layout flow
-     so the demo still sits at its intended rhythm in the page. */
-  padding: 20px;
-  margin: -20px 0 calc(clamp(2rem, 4vw, 3rem) - 20px);
+  /* 500px visible + 64px buffer (32px per side) = 564px total.
+     box-sizing: border-box is inherited, so children sit in 500px. */
+  max-width: 564px;
+  /* 32px padding is an invisible hover buffer so the divider does not
+     immediately snap back when the pointer grazes the visible box
+     edge. Negative top/bottom margins collapse the padding out of
+     layout flow so the demo keeps its rhythm in the page. */
+  padding: 32px;
+  margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
 }
 
 .split-container {
@@ -1012,7 +1014,10 @@ main#main {
   height: 360px;
   border-radius: 12px;
   overflow: hidden;
-  background: var(--color-cream);
+  /* Match the page background so the 32px padding area is invisible.
+     The border + border-radius define the visible box; individual
+     demo content provides its own colors on top. */
+  background: var(--color-paper);
   border: 1px solid var(--color-mist);
   cursor: ew-resize;
   user-select: none;