在DIV中对齐水平UL菜单

Question

努力让我的水平UL菜单在父DIV中居中。

相当讨厌，因为它实际上大约是10-20px。

任何帮助都会很棒，谢谢！

https://jsfiddle.net/xd5cxngt/

HTML

<div id="navbar">
        <ul id="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="The-Isle-of-Wight.html">The Isle of Wight</a></li>
            <li><a href="Your Stay">Your Stay</a></li>
            <li><a href="Booking">Booking</a></li>
            <li><a href="Contact Us">Contact Us</a></li>
        </ul>
    </div>

CSS

#navbar {
    background-color: #dddddd;
    text-align: center;
    height: 28px;
    max-width: 100%;
    min-width: 960px;
    margin: 0 auto;
}
ul#menu li {
    display: inline-block;
}
ul#menu li a {
    background-color: #4d4d4d;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
}

Answer 1

只需删除导航栏div中的行min-width: 960px;即可。 这是一个工作示例：https://jsfiddle.net/84etsxzn/

Answer 2

事实证明问题出在用户代理样式上。

它添加了40px作为左边填充。

所以用它来删除它，希望这应该涵盖大多数浏览器。

* {-webkit-padding-start: 0px;}

谢谢Lorenzo的帮助。