我使用宽度和％将我的html页面分成了一半，但看起来Chrome检查器中仍然存在重叠？

Question

我正在努力创建一个响应式博客。这是我的两半代码：

.masthead {
  background-color: $hot-orange;
  float:left;
  position: fixed;
  height: 100%;
  width: 32%;

  @include mobile {
    text-align: center;
  }
}

.main-body {
  float: right;
  width: 68%
}

这是包装两者的容器：

.container {
  margin: 0 auto;
  max-width: 1250px;
  width: 100%;
}

我做错了吗？当我打开检查员并突出显示两半时，看起来右半部分（主体）与左侧略微重叠。我似乎无法找到问题。

这是我的repo