Html 在页眉按钮中使用边距

我有一个宽度为688px的MainHeader容器。我的每个按钮都是212px（总共336px）宽。现在，因为我想让这些按钮的左右边距完全相同，所以右边，左边边距是8.6px，右边边距也是8.6px。但我的一个按钮在下一行。我在计算中做错了什么

我的CSS风格

.MainHeader{
    height:100px;
    width:688px;
    padding:inherit;
    border:1px solid blue;
    background-color:black;
    }
.BodyContainer{
    height:788px;
    width:688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:white;
    }
.MainFooter{
    height: 100px;
    width: 688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:black;
    }
.Button{
    display:block;
    height:30px;
    width:150px;
    padding :0px 5px;
    background:darkorange;
    border:1px solid black;
    color:white;
    text-align:center;
    font:bold 14px/30px arial;
    background: linear-gradient(white, blue);
    border-radius: 5px;
    }
a.Button{
    text-decoration: none;
    }

a.Button:hover{
    background: grey;
    }
ul{
    padding: 0;
    }
li{
    list-style:none;
    display:inline-block;
    margin-right: 8px;
margin-left: 8.6px;
}

我的HTML代码

<div class="MainHeader">
    <div>
    <div>
        <ul>
        <li><a class="Button" href="http://www.google.com">Homepage</a></li>
        <li><a class="Button" href="http://www.google.com">Search</a></li>
        <li><a class="Button" href="http://www.google.com">Contact Us</a></li>
    </ul>
    </div>
</div>
</div>

因为底部有边框1px，所以会同时添加左侧和右侧1px。所以你必须把两边都去掉2px。记住要清楚：毕竟，两边都是

你想要实现什么？在这里的一行中，它们看起来很好。我试图在所有按钮之间获得相等的间距。因此，由于报头的宽度为688像素，按钮的宽度为212像素（总计636像素）。根据我现在的计算，如果我想加上左marign和右margin，每个应该是8.6px。当我在浏览器中应用其中一个按钮位于两个按钮的下方时。px不能是小数。我只是去掉了小数，但还是一样的。另外，如果你能让我知道我在计算中做错了什么，那就太好了。