Need help centering top navigation buttons - Wordpress

Hello guys. I am new to wordpress and I am trying to create my first wordpress blog. I downloaded a nice theme that I am trying to tweak to my expectations.

Right now I am trying to figure out how to move the top-menu navigation buttons to the center of the page. I am not very good with CSS codes and the codes for the navigation menu are really complex. When I tried moving the navigation menu to center I ended up messing up my whole page

This is my site: http://getbackexgirlfriendadvice.com/

I am trying to move the blue navigation menu (home, articles, contact me...) to the exact center of the page.

Here is the CSS code that belongs to the navigation menu. I can provide the whole style.css code if necessary.

I will be forever greatful if someone is kind enough to help me with this. Of course rep+ to anyone who figures this out

 

Find:

#nav-wrap1{
background: transparent url(images/nav-left.png) no-repeat left top;
padding-left: 25px;
position: absolute;
z-index: 100;
top: 170px;
left: 1em;
height: 64px;
}

Code (markup):

Replace with:

#nav-wrap1{
background: transparent url(images/nav-left.png) no-repeat left top;
padding-left: 25px;
position: absolute;
z-index: 100;
top: 170px;
left: [COLOR="Red"]27%[/COLOR];
height: 64px;
}

Code (markup):

Honestly...it's not perfect, but it pretty much gets the job done. There are better ways of doing this, but this one is simple and is almost what you need. Tried in Firefox, not sure about IE.

 

I think adding a "wrap" would be enough, the two wraps (wrap1 & wrap2) aren't really holding the navigation but rather styling them. So, we'll add another DIV.

Find:

     <div id="nav-wrap1">
      <div id="nav-wrap2">
        <ul id="nav">

Code (markup):

Replace with:

<div id="nav-m-wrap">
     <div id="nav-wrap1">
      <div id="nav-wrap2">
        <ul id="nav">

Code (markup):

Find:

     </div>
     <!-- /main navigation -->

Code (markup):

Replace with:

(here we added a DIV named nav-m-wrap that contains rest of navigation styling)

Open style.css. Add a rule for nav-m-wrap, you may need to play the width value.

Add this set of rule:

#nav-m-wrap{
height: 81px;
margin: 0 auto;
width: 527px;
}

Code (markup):

Find #nav-wrap1. Change the position to relative, top value to 128px, and remove left property.

Find:

#nav-wrap1 {
background: url(images/nav-left.png) no-repeat left top;
height:64px;
left:1em;
padding-left:25px;
position:absolute;
top:170px;
z-index:100;
}

Code (markup):

Replace with:

#nav-wrap1 {
background:url(images/nav-left.png) no-repeat left top;
height:64px;
padding-left:25px;
position:relative;
top:128px;
z-index:1000;
}

Code (markup):

Important: Before you edit anything, make sure you have backup copy of those files.

 

hope..this will resolve..add left padding

#nav-wrap1{
background: transparent url(images/nav-left.png) no-repeat left top;
padding-left: 225px;
position: absolute;
z-index: 100;
top: 170px;
left: 1em;
height: 64px;
}

 

Thanks a lot guys! Rep+ for everyone MYNDs method seemed to work the best. Now its in the exact center for both Firefox and IE. The only problem now is that in IE the navigation menu is about 1cm lower than in firefox Open the page in IE to see what I mean.

I discovered that there is a CSS file called ie6.css with codes specificalyl to fix IE bugs. Perhaps somethig has to be added to this file too?

Thanks a lot so far guys. You are geniouses, especially you MYND. I would have never figured out this myself.

 

ie6.css is for uh... IE6. Did check the site on the IE7, seems to have the same problem.

Try this:

#nav-wrap1 {
background:url(images/nav-left.png) no-repeat left top;
height:64px;
padding-left:25px;
z-index:1000;
}

#nav-m-wrap{
height:81px;
margin:0 auto;
position:relative;
top: 136px;
width:527px;
}

Code (markup):

Or, it could the paddings in #pagetitle rule. Remove them (padding: 3em 0 0 1em;), and increase top property value to about 167px.

 

Removing the pagetitle paddings did the trick. Thanks a lot