私のウェブサイトでマージン設定が正しく機能しないのはなぜですか？

Question

私が取り組んでいるこのサイトのホームページの本体セクション内のコンテンツの余白設定はすべて正しく表示されておらず、互いに重複しています。これは私に煩わしさを与えてくれるもので、何が間違っているのか分かりません。あなたが私を助けることができるかどうか見てみてください。

もう一度、本体に3つのセクションがあり、それらはすべて間違って表示されています！

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

最初の問題は、第二（ボタン）に最初のセクション（歴史）から私が持っているマージンに加えて、20ピクセルの余分な隙間が存在することである。ここでは

は、私のサイトですなぜ、ランダムなギャップがあるのですか（ファイアバグとGoogleの 'inspect要素'は両方ともそこに何も表示されず、余分なスペースがランダムです）。

第二の問題は、「ボタン」セクションでは、「コンテンツ領域」が20ピクセルのマージンを有するように設定されているので、それと「コンテンツ領域」セクションの間に20ピクセルのマージンを有していなければならないということです。

最終的な問題は、それらのそれぞれの両方が20ピクセルのマージンを持っているので、「コンテンツ領域」セクションとフッタの間のボトムマージンが40ピクセルの合計でなければならないということです。 home.cssライン上で、このCSSを追加

Answer 1

.buttonsクラスライン194はstyle.css

position:relative; 

からcssの下に削除3

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

これをstyle.cssに追加します。上記CSSのINE 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; 
} 

最終的な出力画像下記参照：

Answer 2

あなた.buttonsクラスからposition: relativeを削除