为什么保证金设置在我的网站上没有正常运作？

Question

我正在处理的本网站主页主体部分内容的所有边距设置都没有正确显示，并且彼此重叠。这让我感到烦恼，我无法弄清楚出了什么问题。请看看你是否可以帮助我。

再次，主体内有3个部分，它们都显示错误！

这是我的网站：

http://studentweb.eku.edu/alamaldean_alami/d+m/index.html

第一个问题是，从第一部分（历史）到第二部分（按钮），除了我设置的边距之外还有20px的额外间隙，为什么会出现随机间隙（firebug和google''inspect元素'既没有显示任何东西，只是一个随机的额外空间。）

第二个问题是'按钮'部分在它与'content-area'部分之间应该有20px的边距，因为'content-area'被设置为具有20px的边距。

最后一个问题是'content-area'部分和页脚之间的底部边距应该总共为40px，因为这两个部分都有20px的边距。

Answer 1

从.buttons类中删除position: relative

Answer 2

从.buttons类第194行style.css

中删除下面的css

position:relative;

在home.css第3行添加此css

.history {
    background: none repeat scroll 0 0 transparent;
    margin: 20px 20px 0;
    padding: 10px;
}

在style.css第108行添加此内容

.footer {
    padding: 20px 20px 10px;
}

style.css第102行

.content-area {
    background: url("..//images/transbackc.png") repeat scroll 0 0 transparent;
    margin: 20px 10px;
    padding: 10px 0;
}

home.css第38行

.services div {
    border-right: 1px solid white;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 250px;
    padding: 9px;
    text-align: center;
    width: 400px;
}

以上css的最终输出见下图：