small design change

src/layouts/baseSection.astro

@@ -6,7 +6,7 @@ export interface Props {
 const { title } = Astro.props
 ---
 
-<div>
+<div class="base">
   <h1>{title}</h1>
   <div>
     <slot />
@@ -30,9 +30,12 @@ const { title } = Astro.props
     padding: 1em;
     position: relative;
   }
-  div > h1 {
+  div h1 {
     color: white;
-    margin: 0.5rem 0px 0.5rem 0.5em;
+    margin-top: 2rem;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
@@ -43,4 +46,16 @@ const { title } = Astro.props
       column-gap: 1.5em;
     }
   }
+
+  .base {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  @media (min-width: 1500px) {
+    .base {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
 </style>