Centering Navigation-Flatiron Template

Love the flatiron template. Only issue is not being able to center the navigation. I would like to have either title one one centered line with navigation below, or title in center with navigation on either side (prefer). This is what I have tried entering into custom CSS below, but it did nothing. Any help very greatly appreciated! Thanks!

1.   #logoWrapper {display: block !important;     padding-top: 50px;
2.       margin: auto !important;}
3.   
4.   header{
5.       position: fixed;
6.       height: 200px;
7.       padding: 0px;
8.       text-align: center;
9.       
10.      border-bottom: 0px solid #999999;}
11.      
12.    #header #headerNav { 
13.      display: inline-block;
14.      margin-top: 45px;
15.      text-align: center; 
16.      margin-right:;
17.    }
18.    
19.    #headerNav nav a {
20.      padding-left: 15px;
21.      padding-right: 15px;}

Try adding the following to the custom css area, after any other code that may be there. 

#navigator .siteTitle {
    float: none;
    padding: 0;
	padding-top: 20px;
    max-width: 100%;
    text-align: center;
}
#navigator header#topBar ul#nav {
    float: none;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    width: 60%;
    text-align: center;
}

Unfortunately that one above didn't change it. Anything else I might try?

@AKTH Can you share site url? I just tried colin's code. It worked...

or try (Add to Home > Design > Custom CSS)

#navigator .siteTitle {
    float: none;
    text-align: center;
    max-width: 100%;
    padding-bottom: 0;
}
#navigator header#topBar ul#nav {
    float: none !important;
    max-width: 100% !important;
    text-align: center;
}