Html 不合作

再一次，清单让我难以置信

<div id="headbottom">
            <ul id="headnavbutton">
                <li id="button1" class="headnavbutton"></li>
                <li id="button2" class="headnavbutton"></li>
            </ul>   
 </div>

你可以说，看起来很甜美，很简单。但由于我不知道的原因，列表被从父div中向下推

这里有一个JSFIDLE：它并不准确，但它很好地描述了正在发生的事情

---

现在在divheadnavbutton中定义边距，如下所示

#headnavbutton {
    margin: 0;
}

---

天哪，除了这个，我什么都试过了。我是个白痴。非常感谢。