Centering the primary menu

style.css

@@ -148,9 +148,10 @@ body > footer {
 nav#top-menu,
 nav#primary-menu {
 	background: #fafafa;
-	font-size: 14px;
-	position: relative;
+	font-size: 0.9em;
 	z-index: 100;
+	width: 50%; /* Need to set this via a variable */
+	margin: 0 auto;
 }
 
 p.sub { /* Style main menu descriptions */

styles/menus.css

@@ -365,7 +365,7 @@
 #belowheadermenu ul li,
 #belowheadermenu ul li a,
 #belowheadermenu #menu-button {
-  margin: 0;
+  margin: 0 auto;
   padding: 0;
   border: 0;
   list-style: none;
@@ -375,6 +375,7 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+  width: max-content;
 }
 #belowheadermenu:after,
 #belowheadermenu > ul:after {
@@ -392,6 +393,8 @@
 	font-family: serif;
 	background: #fff;
 	border-top: solid 1px #333;
+	width: 50%;
+	margin: 0 auto;
 }
 #belowheadermenu > ul > li {
   float: left;