Centering the Nav Menu: Wordpress Hemingway Theme - css

Question

I am still learning CSS, and don't know PhP, so I am probably missing something simple here.
Trying to center the nav menu (ul.blog-menu) and can't seem to figure it out. Have reviewed the other threads on this topic and so far none of it worked for me.
I am using the Hemingway Theme by Anders Noren. Menu is offset to the left-center
The site is http://www.fredwbaker.com/
Menu, offset to left, showing element in inspector
The relevant code section in the stylesheet is below. THANK YOU for your insight!
/* -------------------------------------------------------------------------------- */
/* 5. Navigation
/* -------------------------------------------------------------------------------- */
.mobile-menu {
display: none;
}
.blog-menu {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}
.blog-menu ul {
margin: 0;
}
.blog-menu li {
line-height: 1;
margin: 0;
position: relative;
}
.blog-menu > li + li:before {
color: #444;
content: "/";
display: block;
font-size: 16px;
line-height: 1;
margin: -9px 0 0 -3px;
position: absolute;
left: 0;
top: 50%;
z-index: 1000;
}
.blog-menu a {
display: block;
padding: 27px 20px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba( 255, 255, 255, 0.5 );
font-size: 13px;
}
.blog-menu a:hover,
.blog-menu .current-menu-item a {
color: #fff;
text-decoration: none;
}
.blog-menu > .menu-item-has-children a,
.blog-menu > .page_item_has_children a { padding-right: 35px; }
.blog-menu > .menu-item-has-children::after,
.blog-menu > .page_item_has_children::after {
content: "";
display: block;
border: 5px solid transparent;
border-top-color: rgba( 255, 255, 255, 0.5 );
position: absolute;
z-index: 1001;
right: 17px;
top: 50%;
margin-top: -2px;
transition: border-color .2s ease-in-out;
}
.blog-menu > .menu-item-has-children:hover::after,
.blog-menu > .page_item_has_children:hover::after { border-top-color: #fff; }
.blog-menu li:hover a {
background-color: #1d1d1d;
cursor: pointer;
}
.blog-menu li:hover > a { color: #fff; }
/* Sub Menus --------------------------------- */
.blog-menu ul {
position: inline-block;
display: none;
z-index: 999;
text-align: center;
}
.blog-menu ul li {
float: none;
display: block;
}
.blog-menu ul > .menu-item-has-children::after,
.blog-menu ul > .page_item_has_children::after {
content: "";
display: block;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
position: absolute;
z-index: 1001;
right: 10px;
top: 50%;
margin-top: -5px;
}
.blog-menu ul > .menu-item-has-children:hover::after,
.blog-menu ul > .page_item_has_children:hover::after { border-left-color: #fff; }
.blog-menu ul li {
width: 240px;
background: #1d1d1d;
}
.blog-menu ul a {
padding: 20px 0px;
margin: 0 20px;
line-height: 130%;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blog-menu ul > li:last-child a { border-bottom-width: 0; }
.blog-menu li:hover > ul {
opacity: 1;
left: 0;
display: block;
}
/* Deep down --------------------------------------- */
.blog-menu ul li:hover > ul {
top: 0;
left: 240px;
margin-left: 0;
}

Answer 1

Without you sending a url to inspect from I can't say for sure this will work but because the blog menu is using flex, try adding justify-content:center. So:
.blog-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}