diff --git a/_assets/css/critical.scss b/_assets/css/critical.scss
index 63e3033..b4c790b 100644
--- a/_assets/css/critical.scss
+++ b/_assets/css/critical.scss
@@ -125,7 +125,7 @@ ul.list-unstyled li {
 
 // limit width of article to optimise reading experience
 @include media-breakpoint-up(md) {
-  article, .index {
+  article, .index, .category {
     width: 550px;
     margin-left: auto;
     margin-right: auto;
diff --git a/_layouts/category.html b/_layouts/category.html
index d72c7fc..59f94d4 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -1,21 +1,23 @@
 ---
 layout: default
 ---
+<div class="category">
+    {{ content }}
+    <ul class="post-list list-unstyled">
+        {% for post in site.categories[page.category] %}
+        <li class="mb-4">
+            <div class="small text-muted">
+                <span class="far fa-calendar-alt"></span>
+                <time datetime="{{ post.date | date_to_xmlschema }}">
+                    {{ post.date | date: "%b %-d, %Y" }}
+                </time>
+                • {% include reading-time.html content=post.content %}
+            </div>
+            <p class="h4 post-title">
+                <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+            </p>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
 
-{{ content }}
-<ul class="post-list list-unstyled">
-    {% for post in site.categories[page.category] %}
-    <li class="mb-4">
-        <div class="small text-muted">
-            <span class="far fa-calendar-alt"></span>
-            <time datetime="{{ post.date | date_to_xmlschema }}">
-                {{ post.date | date: "%b %-d, %Y" }}
-            </time>
-            • {% include reading-time.html content=post.content %}
-        </div>
-        <p class="h4 post-title">
-            <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
-        </p>
-    </li>
-    {% endfor %}
-</ul>