列表元素未完全居中？

Question

我正在尝试创建一个简单的网站，该网站将根据所使用设备的分辨率进行扩展。我希望它可以根据是从移动设备还是桌面显示器查看来扩展。我使用百分比宽度和高度来调整容器和图像的大小。

导航，图像和音频元素都在列表元素中，但无论出于何种原因......它稍微向右偏移，并且不以背景灰色重复模式为中心。所以当浏览器调整大小时，项目会不要居中。我的HTML看起来像这样：

<div id="mobile-container">
        <ul id="nav">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <a href="photos.html">Photos</a>
            </li>
            <li>
                <a href="contact.html">Contact</a>
            </li>
            <li>
                <div class="group-image">
                    <img class="GFU-image" src="images/GFU-Hour.png" alt="" />
                </div>
            </li>
            <li>
                <audio controls="controls">
                    <source class="audio-player" src="media/Alice Cooper - Poison.mp3" type="audio/mp3" />
                    Your browser does not support the audio element.
                </audio>
            </li>
        </ul>
    </div>
</body>

我的CSS看起来像这样：

html, body {
    background-color: #000000;
}
div#mobile-container {
    max-width: 80%;
    max-height: 85%;
    margin: auto auto;
    background: url('../images/background.png') repeat;
    min-height: 480px;
}
.group-image {
    max-width: 100%;
    max-height: 100%;
    min-width: 320px;
}
#nav {
    text-align: center;
    width: 100%;
    min-width: 320px;
}
#nav li {
    display: inline;
    font-size: 20px;
}
#nav li a {
    font-family: "Courier New";
    color: #FFFFFF;
    padding: 3%;
    font-size: 1.0em;
}
.GFU-image {
    width: 85%;
    height: 80%;
}

以下是问题的图片：

不知道这里发生了什么以及为什么它不以背景模式为中心！

非常感谢任何意见或建议..