Navbar不会居中

Question

好的，所以我在过去的两天里四处寻找，试图解决这个问题，我找不到解决方案。我正在尝试使用asp.net创建一个网站，并试图使导航栏居中。现在，它几乎居中，我唯一的问题是导航栏的左侧有一个间隙，这是一张照片显示： 我几乎尝试了所有的东西，从更改浮动样式，显示，填充，边距和文本缩进，并没有任何工作。有人可以帮忙吗？谢谢。

＆＃13;

＆＃13;

nav {
    font-family:'Electrolize',sans-serif;
    font-size: 0.7em;
    height: 60px;
    margin: 0px auto;
    padding: 0;
    position: relative;
    width: 70%;
}

nav ul li {
    background-color: rgb(192, 64, 0);
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    color:#eee;
    float: left; 
    list-style:none;
    margin-left: 0 !important;
    padding: 0;
    text-align: center;
    text-indent: 0;
    text-decoration:none;
   transition:all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    vertical-align: baseline;
    width: 20%;
}

＆＃13;

<form id="form1" runat="server">
    <div>
        <header>
            <img class="headerImg" runat="server" src="~/Resources/header_1.png" />
        </header>
        <nav>
            <ul>
                <li><a href="home.aspx" >Home</a></li>
                <li><a href="#" >About Us</a></li>
                <li><a href="#" >Policies</a></li>
                <li><a href="#" >FAQ's</a></li>
                <li><a href="#" >Contact Us</a></li>
            </ul>
        </nav>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将填充0（零）添加到ul

nav {
    font-family:'Electrolize',sans-serif;
    font-size: 0.7em;
    height: 60px;
    margin: 0px auto;
    padding: 0;
    position: relative;
    width: 70%;
}

nav ul{
    padding: 0px;  
}

nav ul li {
    background-color: rgb(192, 64, 0);
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9) inset;
    color:#eee;
    float: left; 
    list-style:none;
    margin-left: 0 !important;
    padding: 0;
    text-align: center;
    text-indent: 0;
    text-decoration:none;
   transition:all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
    vertical-align: baseline;
    width: 20%;
}

<form id="form1" runat="server">
    <div>
        <header>
            <img class="headerImg" runat="server" src="~/Resources/header_1.png" />
        </header>
        <nav>
            <ul>
                <li><a href="home.aspx" >Home</a></li>
                <li><a href="#" >About Us</a></li>
                <li><a href="#" >Policies</a></li>
                <li><a href="#" >FAQ's</a></li>
                <li><a href="#" >Contact Us</a></li>
            </ul>
        </nav>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
</form>