More menu layout fixes

src/layouts/RootLayout.astro

@@ -33,7 +33,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
     </div>
 	</body>
   <style>
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
       body {
         grid-template-areas: 
           "header"
@@ -42,6 +42,9 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         grid-template-columns: 1fr;
         margin: 1rem 0.5rem;
       }
+      main {
+        padding: 1em;
+      }
       .header {
         display: block;
       }
@@ -49,7 +52,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         display: none;
       }
     }
-    @media (min-width: 800px) {
+    @media (min-width: 900px) {
       body {
         grid-template-areas: 
           "header header"