Properly scroll and center content

app/assets/stylesheets/card-columns.css

@@ -3,10 +3,6 @@
   /* ------------------------------------------------------------------------ */
 
   #main:has(.card-columns) {
-    padding-inline: 0;
-  }
-
-  .card-columns {
     --bubble-size: 3.5rem;
     --cards-gap: min(1.2cqi, 1.7rem);
     --column-gap: 8px;
@@ -17,21 +13,23 @@
     --progress-max-cards: 20;
     --progress-max-height: 50dvh;
 
-    align-items: stretch;
+    padding-inline: var(--column-gap);
+  }
+
+  .card-columns {
+
     container-type: inline-size;
     display: grid;
     gap: var(--column-gap);
     grid-template-columns: 1fr var(--column-width-expanded) 1fr;
-    margin: var(--cards-gap) auto 0;
+    margin-inline: auto;
     max-inline-size: var(--main-width);
-    position: relative;
-    box-shadow: inset 0 0 0 2px red;
-    justify-content: start;
     overflow-x: auto;
+    position: relative;
 
     /* When it has something expanded */
     &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) {
-      grid-template-columns: auto auto auto;
+      grid-template-columns: auto var(--column-width-expanded) auto;
     }
 
     &:has(.cards) {