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.