出乎意料的导航结果？

Question

我有一个非常简单的导航栏：

http://jsfiddle.net/Gqv88/1/

<nav>
    <div class="navTop">
        <h1>Title</h1>
        <p>Sub header</p>
    </div>
    <div class="navBottom">
        <ul>
            <li id="btnHome">Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </div>
</nav>

body {
    padding:0;
    margin:0;
    width:100%;
    background: url("img/escheresque_ste.png") repeat;
}
nav {
    width:100%;
    height:50px;
    position:absolute;
    text-align:center; /* centre child content */
    background-color:black;
}

这应该做的是创建一个跨越页面整个宽度的div，里面有一些项目。但是当页面变小（半屏幕视图）并且滚动条移动时，导航栏结束屏幕的位置结束会在右侧留下相当大的空隙。有什么想法吗？