Re-add margins on mobile

assets/css/bobastyle.css

@@ -52,6 +52,7 @@
 }
 
 
+
 /* Post layout (in list pages) */
 .list-page-content {
   display: flex;
@@ -202,10 +203,6 @@
 
 
 /* Header formatting (website title and article section headers) */
-.top {
-  margin: 20px;
-}
-
 .header a,
 .section-header a {
   color: inherit;
@@ -242,15 +239,6 @@
   padding: 8px 15px;
 }
 
-.content,
-footer {
-  margin: 20px;
-}
-
-footer {
-  text-align: center;
-}
-
 #back-to-top {
   position: fixed;
   float: right;
@@ -338,6 +326,7 @@ footer {
 /* Basic elements */
 html {
   scroll-behavior: smooth;
+  margin: 0 20px;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -350,11 +339,15 @@ body {
   background-color: var(--background);
   color: var(--text-normal);
   font-family: "Open Sans", "Noto Sans", sans-serif;
-  margin: auto;
+  margin: 0 auto 20px;
   max-width: 720px;
   overflow-wrap: break-word;
 }
 
+footer {
+  text-align: center;
+}
+
 img,
 video {
   max-width: 100%;
@@ -504,9 +497,7 @@ li.disabled > .page-link:hover {
 
 /* Breadcrumb navigation */
 .breadcrumb {
-  margin-top: 40px;
-  margin-bottom: 20px;
-  margin-left: 20px;
+  margin: 30px 0 20px;
 }
 
 .breadcrumb ul {

layouts/_default/baseof.html

@@ -14,15 +14,15 @@
             {{ partial "breadcrumb.html" . }}
         {{ end }}
 
-        <div class="content">
+        <div class="main">
             {{ block "main" . }}
                 {{ .Content }}
             {{ end }}
         </div>
 
         {{ with .Site.Copyright }}
+            <hr>
             <footer>
-                <hr>
                 <small>
                     {{ . | safeHTML }}
                 </small>

layouts/_default/single.html

@@ -46,7 +46,9 @@
         </div>
     {{ end }}
 
-    {{ .Content }}
+    <div class="post-content">
+        {{ .Content }}
+    </div>
 
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}