diff --git a/TODO b/TODO
index 40b5519..3213396 100644
--- a/TODO
+++ b/TODO
@@ -10,4 +10,4 @@ ico?
 
 ~~center titles properly~~
 
-center content box properly
+~~center content box properly~~
diff --git a/static/css/default.css b/static/css/default.css
index 9dad34d..318bf49 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -82,11 +82,17 @@ a:hover {
     display: block;
     margin: 1em;
     padding: 1em;
-    /* min-width: calc(100% - 5em); */
+    /* needed due to flex*/
+    width: 100%;
     max-width: 960px;
     border: 0.5em solid var(--content-border-color);
     border-radius: 0.5em;
 }
+#content-outer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
 pre {
     min-height: 2em;
diff --git a/templates/default.html b/templates/default.html
index a39bdc8..661bc21 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -15,11 +15,13 @@
         <a class="nav-link" href="/posts/">Blog Posts</a>
         <a class="nav-link" href="/links/">Links</a>
     </div>
-    <div id="content">
-        <h1
-            style="font-variant: small-caps;text-align: justify; -moz-text-align-last: center; text-align-last: center;">
-            {{{title}}}</h1>
-        {{{content}}}
+    <div id="content-outer">
+        <div id="content">
+            <h1
+                style="font-variant: small-caps;text-align: justify; -moz-text-align-last: center; text-align-last: center;">
+                {{{title}}}</h1>
+            {{{content}}}
+        </div>
     </div>
     <div id="footer">
     </div>