html5 li元素横向排列,html5 - li元素inline-block横向排列，出现了未知间隙

Code

• 我的首页
• GitHub
• about me
• 所有内容

body,ul,h1{

margin: 0;

padding: 0;

}

li{

list-style: none;

}

a {

text-decoration: none;

}

header {

width: 1000px;

}

li {

padding: 25px;

text-align: center;

display: inline-block;

width: 200px;

}

通过上面的代码，我想将四个li元素横向排列，

li width：200px(200*4=800px);

左右padding为25px(25*8=200px);

总和1000px；但是实际却超过了1000px。

第一个li是正常的

第二个li开始出现偏移，但预设border，margin都为0；

搞不清楚为什么两个li之间为什么不是紧挨着的

之后我开始凑数，想找出这个间隙的大小，结果发现：

在Firefox中，1015px及以上可以一行显示...

但在Chrome中，1024px及以上时才可以做到一行显示；

我完全搞不懂了...通过Head First进行入门，但是回顾了一下，也没有任何关于这种情况的说明

Chrome(1015px)：

Firefox(1015px)：

Chrome(1024px)：

纠结中...寻求大神指导几句，这个间隙到底是什么东西