diff --git a/examples/index.css b/examples/index.css
index ff3b719..9e4bab6 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -2,6 +2,20 @@
     background-image: url("Space_Default.jpg");
     background-attachment: fixed;
     background-size: cover;
+
+    padding: 0 16px;
+}
+
+@media screen and (max-width: 800px) {
+    #body {
+        padding: 0 8px;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    #body {
+        padding: 0 4px;
+    }
 }
 
 #body .chapter-1 > .panel,
diff --git a/src/rulesets/base.less b/src/rulesets/base.less
index c27b1b5..64de0f9 100644
--- a/src/rulesets/base.less
+++ b/src/rulesets/base.less
@@ -21,9 +21,6 @@
         width: 100%;
         height: 100%;
 
-        // And remove its margin, in case it is the "real" body
-        margin: 0;
-
         // Set the default font family
         .use-font-group(text)
     }
@@ -202,12 +199,12 @@
         display: flex;
         flex-wrap: wrap;
         flex-direction: row;
-        gap: 0.5em;
+        gap: 8px;
         justify-content: center;
         align-items: stretch;
 
         // Add the gap as a vertical margin, so that multiple chapters can be placed next to each other
-        margin: 0.5em;
+        margin: 8px 0;
 
         > @{all} {
             // Allow all children to grow