ChromeとSafariで発生する現象について【jQuery】

HPのグローバルナビをページ中央に設置するhtmlを作っています。
今後メニューの増減が発生することがあるとのことで、
以下のJSでliの幅を合計してulの幅にするようにしています。
（使うのはあまりWEBに詳しくない人なので。）

が、ChromeとSafariでは少ないwidthになり、メニューが2段になってしまいます。
しかし、1回更新すると本来あるべきサイズになってくれます。
Firefoxでは発生しないのですが、ChromeとSafariで同現象が起こります。

色々試してますが、なかなかうまく行きません。
良いアドバイスを頂ければ幸いです。

【HTML】
< nav id="g-nav">
< ul>
< li><a href="">text01</a></li>
< li><a href="">text02</a></li>
< li><a href="">text03</a></li>
< /ul>
< /nav>

【jQuery】
var w_sum = 0
$("#g-nav li").each(function(){
w_sum += $(this).innerWidth(true);
$("#g-nav ul").width(w_sum);
});

【CSS】
#g-nav{
width: 100%;
}
#g-nav ul{
margin: 0 auto;
padding: 0 50px;
}
#g-nav li{
float: left;
height: 32px;
}
#g-nav li a{
color: black;
font-family: lato;
font-size: 110%;
padding: 10px 16px;
text-decoration: none;
}
#g-nav li a:hover{
background-color: #f0f0f0;
}