css: adjust spacing around header on mobile.

app/javascript/src/styles/common/main_layout.scss

@@ -1,7 +1,7 @@
 div#page {
   overflow: visible;
-  margin: 0 20px;
-  padding: 0 10px;
+  margin-left: 30px;
+  margin-right: 30px;
 
   aside#sidebar > section {
     margin-bottom: 1em;
@@ -14,7 +14,6 @@ div#page {
 
 footer#page-footer {
   width: 100%;
-  margin-top: 1em;
   text-align: center;
   padding: 1em 0 1em;
   border-top: 1px solid var(--footer-border-color);

app/javascript/src/styles/common/page_header.scss

@@ -5,7 +5,8 @@
 header#top {
   #app-name-header {
     font-size: var(--text-xxl);
-    margin: 0 30px;
+    margin-left: 30px;
+    margin-right: 30px;
 
     #app-logo img {
       width: 1.25em;

app/javascript/src/styles/specific/z_responsive.scss

@@ -1,12 +1,13 @@
 @media screen and (max-width: 660px) {
   div#page {
-    margin: 0 0.5rem;
+    margin: 0.5rem 0.5rem 0;
     padding: 0;
   }
 
   header#top {
     position: relative;
     text-align: center;
+    margin-top: 0.25rem;
 
     #maintoggle {
       display: block;