Navi Spacing

[jshumate]

I'd like the navi links to be centered, and spaced out with more negative space between the words.
www.jennamichelephotography.com

/* ====================== START NAV ====================== */
#nav { position:relative; z-index:1000; top:190px; height:25px; border-top:1px solid grey; border-bottom:1px solid grey; }
#nav ul { margin:-178px 0pt 0pt; list-style:none; }
#nav li { margin:0 25px 0 0; float:left; padding:185px 0; position:relative; }
#nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:1.5px; position:relative; }
#nav a:hover, #nav .current_page_item a { color:#a10404 }

/* second level */
#nav ul.sub-menu, #nav ul.children { display:none; position:absolute; padding:5px 10px; margin:18px 0 0; width:150px; background:#fff; border:1px solid #d3d3d3; z-index:100000; -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }
#nav ul.sub-menu li, #nav ul.children li { float:none; display:block; padding:10px 0; margin:0; text-transform:none; border-top: 1px solid #DDD; line-height:1em; }
#nav ul.sub-menu li:first-child, #nav ul.children li:first-child { border:0; }
#nav ul.sub-menu li a, #nav ul.children a { color:#8c969e; letter-spacing:0; }
#nav ul.sub-menu li a:hover, #nav ul.children a:hover { color:#333; }     

/* third level */
#nav ul.sub-menu li ul, #nav ul.children li ul { margin:0; top: -6px; z-index:100; }               

/*indicators*/
#nav a.sf-with-ul{ min-width:1px; padding-right: 15px; }
#nav .sf-sub-indicator{position:absolute; display:block; width:10px; height:7px; text-indent:-999em; background: url('images/menu-arrow.png') bottom left; top: 0.25em; left: 110% !important;}
#nav a:focus >.sf-sub-indicator, 
#nav a:hover >.sf-sub-indicator, 
#nav a:active >.sf-sub-indicator, 
#nav li:hover >a >.sf-sub-indicator, 
#nav li.sfHover >a >.sf-sub-indicator{background: url('images/menu-arrow.png') top left;}

#nav ul.sub-menu .sf-sub-indicator, #nav ul.children .sf-sub-indicator{ display:block; background: url('images/menu-arrow.png') bottom right; width: 7px; height: 11px; left: 85% !important; top: 0;}
#nav ul.sub-menu a >.sf-sub-indicator, #nav ul.children a >.sf-sub-indicator{ display:block; background: url('images/menu-arrow.png') bottom right; width: 7px; height: 11px; left: 85% !important; top: 0;}
#nav ul.sub-menu a:focus >.sf-sub-indicator, 
#nav ul.sub-menu a:hover >.sf-sub-indicator, 
#nav ul.sub-menu a:active >.sf-sub-indicator, 
#nav ul.sub-menu li:hover >a >.sf-sub-indicator, 
#nav ul.sub-menu li.sfHover >a >.sf-sub-indicator,
#nav ul.children a:focus >.sf-sub-indicator, 
#nav ul.children a:hover >.sf-sub-indicator, 
#nav ul.children a:active >.sf-sub-indicator, 
#nav ul.children li:hover >a >.sf-sub-indicator, 
#nav ul.children li.sfHover >a >.sf-sub-indicator{background: url('images/menu-arrow.png') top right; }

/* nojs */  
body.no_js #nav ul li:hover > ul { display:block }
body.no_js #nav ul li ul.submenu li:hover > ul, body.no_js #nav ul li ul.children li:hover > ul { display:block }  
/* ====================== END NAV ====================== */

[Sammy12]

1. For link spacing, on line 772 of style.css:

#nav li {
   margin: 0 0 0 25px;
}

change to:

#nav li {
   margin: 0 0 0 65px;
}

2. For letter-spacing, on line 90 of style.css:

#nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing: 1.5px; position:relative; color:#769b9d; }

change to:

#nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing: 0; position:relative; color:#769b9d; }

[jshumate]

Thanks, trying to move the navi links to the center now.

[Sammy12]

For this specific case:

#menu-main-menu {
    padding-left: 80px;
}

[jshumate]

Perfect!