diff --git a/base.css b/base.css
index 42e464b..d57a2cd 100644
--- a/base.css
+++ b/base.css
@@ -8,4 +8,5 @@
     --on-background: #363227;
     --nav-height: 4rem;
     --border-radius: 48px;
+    --max-content-width: 80rem;
 }
diff --git a/style.css b/style.css
index d405848..ea327d6 100644
--- a/style.css
+++ b/style.css
@@ -17,6 +17,8 @@ nav {
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
     height: var(--nav-height);
+    max-width: var(--max-content-width);
+    margin: 0 auto;
 
     /* content inside */
     display: grid;
@@ -55,6 +57,8 @@ nav {
 .hero {
     height: calc(100vh - var(--nav-height) - 2rem);
     padding: 1rem 2rem;
+    margin: 0 auto;
+    max-width: var(--max-content-width);
     display: flex;
     flex-direction: column;
     align-items: center;