html - メニューバーの幅を広げる

Question

メニューを作成し、次のコードを使用してページの中央に配置しました。

<div id="menucontainer">
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</div>

http://jsfiddle.net/isherwood/KLDex/

メニューのメインコンテナ

#menucontainer {
    float:left;
    width:100% ;
    height:40px;
    margin:0;
    padding: 0;

}

続いて (メニューバーを中央に配置するため)

#menucontainer ul {
    width: 980px;
    list-style-type: none;
    padding: 0px;
    margin: 0 auto;
    position:relative;
}

(メニューのリストのスタイル)

#menucontainer ul li {
    float: left;
    min-width: 74px;
    height: 23px;
    margin: 2px 4px 0 0;
    padding: 10px 15px 5px 15px;
    font-size: 13px;
    background-color:#f0f1f4;
    /*border-bottom:4px #cccccc  solid;*/
    color:#5c626c;
    cursor:pointer;
    text-transform:uppercase;
    text-align:center;
}

私が直面している問題は、両側に配置された2つのエクストラを伸ばして、「li」をウェブサイトの両側にずっと伸ばして、上部にバーのように作成したいということです。どうすればそれができますか？