diff --git a/_generated/css/style.css b/_generated/css/style.css
index 8a432e2..3d54cd5 100644
--- a/_generated/css/style.css
+++ b/_generated/css/style.css
@@ -31,8 +31,13 @@ a {text-decoration:underline; color:#000000;}
 
 
 #menu { background-color:#377e22; text-align:center; line-height:30px; line-height:30px; bottom:0px;margin-left:auto;margin-right:auto;width:100%;}
-#menu ul {list-style:none; padding:0; margin:0; font-size:20px; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",helvetica,arial,sans-serif; letter-spacing:1px; color:#FFFFFF;}
-#menu li {margin-right:16px; margin-left:16px; display:inline; padding-bottom:3px}
+#menu ul {list-style:none; padding:0 12px; margin:0; font-size:20px; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",helvetica,arial,sans-serif; letter-spacing:1px; color:#FFFFFF;}
+/* spread the entries over the whole width of the bar rather than bunching them
+   in the middle. space-evenly gives the same gap between neighbours as at the
+   two ends; column-gap is the floor it may never fall below, at which point the
+   row wraps instead. */
+#menu ul { display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; column-gap:24px; row-gap:2px; }
+#menu li {padding-bottom:3px}
 #menu a {color:#FFF; text-decoration:none; padding:4px;}
 
 #menu a:hover {color: #DDD}
@@ -279,10 +284,9 @@ text-decoration:none;
 @media screen and (max-width: 800px) {
   #content { padding: 18px; }
 
-  /* below this width the entries no longer fit on one line, so lay them out as
-     a wrapping flex row - inline items would wrap into ragged, uneven rows */
-  #menu ul { font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; }
-  #menu li { margin-left: 10px; margin-right: 10px; display: inline-block; }
+  /* below this width the entries start to wrap, and spreading them edge to edge
+     would leave a half-empty last row - centre them and keep a generous gap */
+  #menu ul { font-size: 18px; justify-content: center; column-gap: 22px; }
 }
 
 @media screen and (max-width: 600px) {
@@ -292,8 +296,8 @@ text-decoration:none;
 
   /* wrap the menu onto as many rows as needed, with room to tap each entry */
   #menu { line-height: 1.4; padding: 6px 4px; }
-  #menu ul { font-size: 17px; row-gap: 4px; }
-  #menu li { margin-left: 8px; margin-right: 8px; padding-bottom: 0; }
+  #menu ul { font-size: 17px; column-gap: 16px; row-gap: 4px; }
+  #menu li { padding-bottom: 0; }
   #menu a { display: inline-block; padding: 6px 4px; }
 
   /* the feature lists lose the browser's default list indentation */
@@ -325,7 +329,6 @@ text-decoration:none;
 
 @media screen and (max-width: 380px) {
   #content { padding: 10px; }
-  #menu ul { font-size: 16px; }
-  #menu li { margin-left: 6px; margin-right: 6px; }
+  #menu ul { font-size: 16px; column-gap: 12px; padding: 0 4px; }
   #page-top { height: 120px; }
 }