Centering Header Logo and Menu bar?

I know it might be annoying, but it still does not work: https://skepticdog.com/

I have written this in my Custom CSS:

/* This is for centering logo and menu*/
#page .container header hgroup {
float: none;
margin: 0 auto;
}

.site-header img, img.size-full {
display: block;
margin: 0 auto;
}

.main-navigation {
float: none !important;
margin: 0 auto;
width: 100%;
height: 40px;
}

.menu-main-menu-container {
  text-align: center;
width: 100%;
}

.main-navigation ul {
  display: inline-block;
}

.main-navigation li {
  display: table;
  margin: 0 auto;
}

Thank you very much for the help!

I am having the same problem centering the menu and logo. When I put andracuamic code above in Custom CSS it centered the logo (yay!) but not the menu. See https://olympiafriends.org/

Suggestions?

@gabiclayton

Add the following to you custom css

.menu-menu-1-container {
text-align: center;
}

For me it finally worked like this:

#page .container header hgroup {
float: none;
margin: 0 auto;
}

.site-header img, img.size-full {
display: block;
margin: 0 auto;
}

.main-navigation {
float: none !important;
margin: 0 auto;
width: 560px;
height: 40px;
}

You just have to play a bit more with numbers here (at width):

.main-navigation {
float: none !important;
margin: 0 auto;
width: 560px;
height: 40px;
}

salsaturation, that worked to center the menu. Thanks, But it also centered the items in the sub menus which I really want to be flush left. Any ideas on how to do that?
See: https://olympiafriends.org/

New theme version 1.3 will be include switcher in theme options for different positions (logo and menu)

great! thanks!