diff --git a/static/css/colors.css b/static/css/colors.css
index 54c1303..4ee06e0 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -123,7 +123,7 @@ a:active {
     background: var(--header-bg);
 }
 
-#content {
+main {
     border: 0.7rem solid var(--content-border-color);
 }
 
diff --git a/static/css/layout.css b/static/css/layout.css
index 8ffa4e4..e7b67e1 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -137,7 +137,7 @@ header#header {
     width: 100vw;
     padding: 0.5em 1em;
 }
-#content {
+main {
     box-sizing: border-box;
     display: block flex;
     margin-top: 1rem;/*calc(24px + 3rem) 1rem 1rem 1rem;*/
@@ -161,11 +161,6 @@ header#header {
     align-items: center;
 
 }
-main {
-    max-width: -moz-available;
-    max-width: -webkit-fill-available;;
-    max-width: fill-available;
-}
 header#article-header {
     max-width: -moz-available;
     max-width: -webkit-fill-available;;
@@ -250,7 +245,7 @@ footer {
 }
 /* we really want to make sure this doesn't stick around when colors load in regardless of when/how colors get loaded in*/
 @layer pre-load{
-    #content {
+    main {
         border: 0.7rem solid white;
     }
 }
@@ -261,7 +256,7 @@ footer {
 #header {
     visibility: hidden;
 }
-#content {
+main {
     border-style: none;
 }
 pre {
diff --git a/templates/default.html b/templates/default.html
index 1ebf527..0204127 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -40,11 +40,9 @@
         </div>
     </header>
     <div id="content-outer">
-        <div id="content">
-            <main>
-                {{{content}}}
-            </main>
-        </div>
+        <main>
+            {{{content}}}
+        </main>
     </div>
     <footer>
         <div class="socials">