边距不会应用于页脚

Question

Here is my website so you can see the problem: webpage

The problem is that my .footer Has a margin: 50px 0 50px 0; , but for some reason it doesn't appear to have that 50px margin from top. I don't understand what is causing the problem.

Here is full css of footer section ( .dashed-footer is basically inner section of the footer with that dashed border.)

CSS

.footer {
    margin: 50px 0 50px 0;
    background-color: #1d130e;
    width: 100%;
    min-width: 1000px;
    height: 50px;
    border-top: 1px solid #0d0907;
    border-bottom: 1px soid #0d0907;
    clear: both;

    -webkit-box-shadow: 0px 0px 15px -1px #181513;
    box-shadow: 0px 0px 15px -1px #181513;
}

.dashed-footer {
    height: 37px;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    border-top: 1px dashed #613e27 !important;
    border-bottom: 1px dashed #613e27 !important;
    color: #e6d7bb;
    text-shadow: 1px 1px 0 #000;
}

Answer 1

overflow: hidden;

to the section.content is the answer. It is because the elements inside it are floated which takes them out of the normal flow of the document.

Answer 2

I think it is because the margin is applied, 50px down from <section id="content"> , but the trio is for some reason placed outside that section, and pushing the footer down! If you choose 'inspect element' and mouse-over <section id="content"> you can see it stops at the downside of the slides, and the trio is below there. I think the solution is to do margin: [height of trio plus margins, borders, etc] + 50px 0 50px 0;