Javascript 为什么我的div有这么神秘的右边距？

我试图让div#inner3和#inner4并排排列，但他们拒绝合作。当我通过Chrome检查DOM时，两个div上都有一个神秘的右侧边距，一直延伸到页面的末尾

我将全局保证金设置为0，但当我深入查看时，它表示保证金没有值，周期。为什么？为什么我的部门也不合作？我删除了空白，使它们变小，浮动，所有这些都没有用。我已经搜索和挣扎了两个多小时了

注意：溢出-x用于动画；背景CSS用于视差

body, html {
  height: 100%;
  overflow-x: hidden;
  margin: 0em;
}

#section2 {
  height: 500px; 
  width: 100%;
  background-color: black;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px;
  display: inline-block;
  font-size: 0;
}

#inner3 {
  height: 500px;
  width: 50%;
  font-size: 12px;
}

#inner4 {
  height: 500px; 
  width: 50%;
  font-size: 12px;
}

代码：

第页：

---

使用Chrome“Inspect”功能拍摄照片，选择元素后，可在底部的“Computed”选项卡中找到信息。

添加

显示：内联块

到

#inner3

和

#inner4

将把它们并排放置

#inner3 {
  height: 500px;
  width: 50%;
  font-size: 12px;
  display: inline-block;
}

#inner4 {
  height: 500px; 
  width: 50%;
  font-size: 12px;
  display: inline-block;
}

---

哈，我发誓我以前试过三四次都没有成功。这一次我试了一下，很快就奏效了。一定有所有的碎片，但不是在一起。非常感谢！当然可以顺便说一句，我很喜欢你的主页。很酷的背景图片。