html - 布局不对齐

Question

我有两个容器，一个在另一个之上。底部比顶部宽，并且左右都有自动边距。我认为最上面的应该甚至坐在另一个上面。

我不知道是什么导致了这种不平衡。远程工作的唯一解决方案是手动设置左边距，但在调整屏幕大小时无法正确缩放。

它旨在在现代浏览器中工作。IE9，铬，FF。IE8 支持尚未完成，但最终需要在 IE8 中工作。

现场演示：

http://julianjosephs.com/seniorloans/

截屏

Answer 1

具有divs类.body-boder-right并且.body-boder-right具有不同的宽度。

.body-boder-left {
  ...
  width: 90px;
}

.body-boder-right {
  ...
  width: 70px;
}

尝试将它们设置为相同：

.body-boder-left {
  ...
  width: 70px;
}

.body-boder-right {
  ...
  width: 70px;
}

Answer 2

就我所见，您已经在container.columns样式中设置了 property margin-left: 10px。没有为下部蓝色部分设置此属性。您可以尝试为页脚应用附加左侧，即：

.container.footer.column.extend-width { left: 10px; }

希望能帮助到你。