Center Primary Menu and Logo
I would like to center my primary menu and logo. This is the CSS I am using:
.site-branding {
width: 50%;
float: none;
text-align: center;
display:block;
margin:0 auto;
}
.header-site-details {
float: none !important;
}
.site-logo {
float: none !important;
}
.site-branding .site-logo {
float:none;
display:block;
}
#site-navigation, #site-navigation ul li, .main-navigation li {
float:inherit;
}
#site-navigation {
text-align:center;
}
#site-navigation ul li {
display:inline-block;
}
For some reason, My primary menu bar has white space at the far right. Why is this? How can I extend the menu par to be across the entire screen?
My website is here:
http://box5772.temp.domains/~theplbp8/?customize_changeset_uuid=77b89c4e-3dda-400d-967a-27db402b2a42