Pacific - Nav Bar centering issue with CSS

Site URL: http://www.terminallyinlove.com

Hello,

On my website www.terminallyinlove.com , I am using the CSS below to remove the title from the top bar navigation. The resulting issue is that the top bar nav is off-centered. I've attached a screenshot to illustrate. 

Is there any additional CSS I can use to fix the offset? I have very little programming knowledge unfortunately. 

The CSS I'm currently using is:

#siteTitle { display: none }

div.index.home {
margin-right: 0 !important;
margin-left: 0 !important;
}

Thanks for your help!

One of these methods should work:

https://stackoverflow.com/questions/5995405/how-to-center-a-navigation-bar-with-css-or-html

Thanks for the reply @derricksrandomviews. I'm afraid my lack of programming knowledge is showing - I tried copying various bits of code after my existing CSS, with no effect. Could you please advise on how to properly integrate the info contained in that thread with my existing CSS?

Put this is custom CSS may need to play a bit and change word left to center. Before you do that Open CSS in window, easier to see, scroll to bottom and paste the code. Leave the word left at first try, because the nav bar may already "think" it is centered. If it doesn't move or moves to far left change left to center. 

nav li {
   float: left;
}
nav {
   display: inline-block;
}

@derricksrandomviews thanks. I tried copying that after my existing CSS (along with changing "left" to "center") and did not see an effect.

#topNav .main-nav {

text-align: left;
 }

remove the code you tried and try above same thing might have to change left to center. 

@derricksrandomviews same thing, no effect. Thanks for your patience.

To make sure I'm doing this correctly, this is what was in my CSS window (I just copied it after the existing CSS):

#siteTitle { display: none }

div.index.home {
margin-right: 0 !important;
margin-left: 0 !important;
}
#topNav .main-nav {

text-align: center;
 }

Looks correct. If there is any issue just have to remove it. 

@derricksrandomviews Gotcha. Unfortunately it doesn't seem to have an effect on the centering. Thanks for your help - please let me know if anything else comes to mind.

I say we don't give up yet:

#header #mainNavWrapper .index { 
   margin: 0 0 0 12px !important; 
   text-align: center !important;
}

Play with font size but first lets get the nav bar in the right spot, I got this from a pacific user so lets see how it goes. Remove everything else I suggested first of course. 

@derricksrandomviews still no effect I'm afraid 😞

This is all I have left, tweaks for a bunch of things in Pacific. You might have to combo a couple. Good luck. 

https://gist.github.com/daz/3ba444a39a7b1f3bf41b

@JustinBlack I was having the same problem. This code worked for me:

#siteTitle { display: none }
#header #mainNavWrapper .index {
   margin: 0 0 0 0 !important;
}
#headerNav {
  margin: 0 0 0 0 !important;
  display: block !important;
}