diff --git a/resources/css/app.css b/resources/css/app.css
index 3d3c9fb5..0c44dfb4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -28,6 +28,14 @@ a {
 
 @tailwind components;
 
+.wrap {
+  @apply w-full max-w-3xl mx-auto;
+
+  &.is-wide {
+    @apply max-w-5xl
+  }
+}
+
 @import 'components/blockquote.css';
 @import 'components/button.css';
 @import 'components/markup.css';
diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig
index f85264eb..735a4ecc 100644
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@@ -7,8 +7,8 @@
 
     {% include 'layout/navbar' %}
 
-    <div class="mt-24 px-4 mx-auto {{ page.wide ? 'max-w-5xl' : 'max-w-3xl' }}">
-        <main id="main-content">
+    <div class="container mt-24 px-4 mx-auto">
+        <main id="main-content" class="wrap {{ page.layout == 'front' ? 'is-wide' : '' }}">
             {% block page_title_wrapper %}
                 <h1 class="leading-tight mb-4">
                     {% block page_title %}{{ page.title }}{% endblock %}
diff --git a/source/_layouts/front.html.twig b/source/_layouts/front.html.twig
index aadd5489..d0a05ebd 100644
--- a/source/_layouts/front.html.twig
+++ b/source/_layouts/front.html.twig
@@ -2,7 +2,7 @@
 
 {% block content_wrapper %}
     <div class="md:flex -mx-6">
-        <div class="w-auto md:flex-1 px-6 mb-12 md:mb-0">
+        <div class="wrap md:flex-1 px-6 mb-12 md:mb-0">
             <div class="markup spaced-y-4 mb-8">
                 {% block content %}{% endblock %}
             </div>
diff --git a/source/about.md b/source/about.md
index eb60237d..df2c3eac 100644
--- a/source/about.md
+++ b/source/about.md
@@ -7,7 +7,6 @@ meta:
         description: 'The personal website and blog of Oliver Davies, a Full Stack Developer and System Administrator from Wales, UK.'
         type: website
 permalink: /
-wide: true
 ---
 <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-gray"/></div>