flex to complete vertical/horizontal site

style.css

@@ -1,8 +1,11 @@
 body {
   font-size: medium;
-  display: flex;
   padding: 1em;
   max-width: 1280px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1.5em;
 }
 
 img, video { max-width: 100% }
@@ -17,6 +20,7 @@ header {
     font-size: xx-large;
     position: sticky;
     top: 1em;
+    flex-wrap: wrap;
     & a {
       text-decoration: none;
       &:hover {
@@ -36,11 +40,11 @@ header {
   }
 }
 
-main {
-  padding-left: 1.5rem;
-}
+main { flex: 1 }
+
+/* used mostly by .zs/index, should maybe class it? */
+ul { padding-left: 0 }
 
-/* used mostly by .zs/index */
 ul li { 
   display: flex;
   align-items: baseline;