html - 导航宽度导致页面右侧有额外空间

Question

我的导航有问题，它太宽以至于一直给我右边额外的空间。我不知道为什么它这么宽，我试着用一些代码让它变小，但我正在让网站响应，当我把代码降低到 320px 左右时，它是基于屏幕尺寸使文字真正很难看到和点击。实际上，当我测试它时，它在我的本地计算机上看起来不错，但是将它放在服务器上并实际在我的手机上查看它看起来很糟糕。以前有人遇到过这样的问题，或者可以看出我做错了什么吗？ JSFiddle

HTML5

<div id="header-banner">
    <div class="wrapper">
        <header>    <a href="index.html">
            <img id="logo" alt="PT Logo" src="Images/PT-logo.png"></a>

            <nav id="main-nav">
                <ul id="nav">
                    <li><a href="index.html">Home</a>
                    </li>
                    <li><a href="#">CityName</a>
                    </li>
                    <li><a href="#">CityName</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</div>

CSS3

/* ===== HEADER NAVIGATION AREA ===== */
 #main-nav {
    position: relative;
    left: 50%;
    bottom: 20px;
    height: 40px;
    background-color: blue;
}
#nav {
    list-style: none;
    margin: auto;
}
#nav li {
    float: left;
    display: inline;
}
#nav li a {
    color: #DB7093;
    display: block;
    padding: 3px 15px;
    height: 20px;
}
#nav li a:hover {
    background-color: #DB7093;
    color: #F0F8FF;
    text-shadow: none;
}

Answer 1

尝试去掉margin:auto，将padding: 3px 15px修改为padding: 3px 1px，看看是不是这样你的问题。

这可能是解决方案:

 

     #main-nav {
        position: relative;
        left: 50%;
        width:350px;
        bottom: 20px;
        height: 40px;
        background-color: blue;
    }

 

将width属性添加到您的#main-nav。