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

Question

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

我将全局边距设置为 0，但是当我深入观察时，它说边距没有 值，句号。为什么？？为什么我的 div 也不合作？我已经删除了空白，使它们更小，浮动，都无济于事。我已经搜索和挣扎了两个多小时了。

注意：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

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

照片是使用 Chrome 的“检查”功能拍摄的，信息可以在选择元素后在底部的“计算”选项卡中找到。

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;
}