布局未对齐

Question

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

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

它旨在用于现代浏览器。 IE9，Chrome，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样式设置了属性margin-left: 10px。 此属性未设置为较低的蓝色部分。您可以尝试使用aditional left 页脚，即：

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

希望它有所帮助。