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

Question

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

我将全局保证金设置为0，但是当我看得更深时，它表示保证金，期间没有值。为什么？？我的div为什么不合作呢？我已经删除了空白区域，使它们变小，漂浮，一切都无济于事。我现在一直在寻找和挣扎超过2个小时。

注意：overflow-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;
}

代码：https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100

Page：https://codepen.io/hungus--bungus/full/rdgEze

使用Chrome“Inspect”功能拍摄照片，选择元素后，可在底部的“计算”标签中找到相关信息。

Answer 1

将display: inline-block;添加到#inner3和#inner4会将它们并排放置。

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

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