css - HTML 布局，菜单文字间距错误，无法居中对齐

Question

我制作了一个 html，顶部栏上有一个菜单。

http://i1127.photobucket.com/albums/l622/sugarboylovephoto/ScreenShot2013-05-20at24031PM_zps2dd74d4d.png

[URL=http://s1127.photobucket.com/user/sugarboylovephoto/media/ScreenShot2013-05-20at24031PM_zps2dd74d4d.png.html][IMG]http://i1127.photobucket.com/albums/l622/sugarboylovephoto/ScreenShot2013-05-20at24031PM_zps2dd74d4d.png[/IMG][/URL]

1. 字间距太宽。比如“Studying Science”，现在studying和Science的差距太大了。如何减少空间？请看附件

2. 如何移动菜单文字中心和灰色条的顶部？

这是菜单栏的代码

<div id="header">
        <div class="head-padding"></div>
        <div id="head"><img src="images/head01.png" width="1010" height="106"></div>
        <div id="nav" class="navbgimg"> 
            <a href="#about">About</a>
            <a href="#studying">Studying Science</a>
            <a href="#SSCI">About SSCI</a> 
            <a href="#highlights">Programme Highlights </a> 
            <a href="#life">Student Life</a> 
            <a href="#fun">Fun Fact</a> 
            <a href="#tips">Interview Tips</a>  </div>
            <div id="headwhite"><img src="images/head02.png" width="1010" height="20"></div>

        </div>

这是菜单栏的CSS

*{ margin: 0 auto;}


h1 {
    font-family: "source-sans-pro";
    font-size: 8pt;
}

body {
    background:#2848ad; 
    margin: 0 auto; 
    font-family: "source-sans-pro",sans-serif;
    height:6078px;
}

copyright {
    margin: 0 auto; 
    font-family:"source-sans-pro"; 
    font-size: 6pt;
}


#header {
    position:fixed;
    z-index:1;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    height:160px; 
    width:100%;
}

#head {
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    background:#204ab4; 
    height:106px; 
    width:1010px;
}

.navbgimg {
    background-image: url(../images/menubar01.png);
    margin-left:auto;
    margin-right:auto;
    width:1010px;
    height:34px; 
}

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 11pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    height:34px; 
    width:1010px;
    word-spacing:20px;
}

#headwhite {
    margin-left:auto;
    margin-right:auto;
    height:20px; 
    width:1010px;
}

#page1 {
    position:relative;
    top:150px;
    height:390px;
    width:1010px;
    background:#00c9e5;
}

Answer 1

因为你使用了“word-spacing”

word-spacing:20px;

在#nav 中

如果我是你，我会这样做:

#nav {
    font-style: normal;
    font-weight: 400;
    font-size: 11pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    height:34px; 
    width:1010px;
    text-align: center   <---------------- require this to center the menu

}

#nav a { padding-right: 20px; display:inline-block; }

编辑

更新上面的代码以支持居中菜单