Footer CSS not working
<p>I set up some <code>CSS</code> styles for a <code>HTML</code> page and all was working as expected. I then edited the <code>CSS</code> (minimally) and suddenly the layout breaks. I've got a copy of the original (working) <code>CSS</code> so I could just go with that. But I wanted to sort out what I did wrong.</p>

<p>So, I've spent a few hours going over the faulty <code>CSS</code> but I just cannot find where it is incorrect. Hoping someone can point out the mistake.</p>

<p>In both cases the <code>HTML</code> is the same.</p>

<p>I've created 2 CodePens, one with working <code>HTML/CSS</code>, the other with same <code>HTML</code> and faulty <code>CSS</code>. The problem is in the footer area. With the faulty <code>CSS</code>, the 'bottom bar' rides up into the main footer above. However, I think I've cleared floats correctly.</p>

<p>Below is what I think is the faulty section of <code>CSS</code> (but it will make more sense to view it along with <code>HTML</code> - see CodePen links further below):</p>

<pre><code>footer{
    font-family: 'Open Sans', sans-serif;
    margin-top:200px;
    border-top:6px solid rgba(246, 246, 246, 0.8);
    background-repeat:repeat-x;
    background-position:left bottom;
    background-size:contain;
    background-color:#b8b8b8;
}

.footer-column-container{
    width:95%;
    max-width:1200px;
    list-style-type:none;
    margin:0 auto;
    padding:25px 0;
}

.footer-column-container li{
    float:left;
    padding:20px 5px;
    width:25%;
    box-sizing:border-box;
}

.footer-column-container ul {
    list-style-type:none;
}

.footer-links{
    height:250px;
}

.footer-links li{
    float:none;
    display:block;
    line-height:12px;
    padding:8px 0;
    width:100%;
}

.footer-column h4{
    color:#fff;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
}

.footer-column a:link{
    font-size:14px;
    text-decoration:none;
    color:#fff; 
}

#bottom-bar-container{
    background-color:#000;
    border-top:1px solid #393939;
    padding:20px 0;
}

#bottom-bar{
    font-size:12px;
    margin:0 auto;
    width:95%;
    text-align:center;
    color:#fff; 
}
</code></pre>

<p>There's a fair bit of code so, rather than place it all here, I'll list links to CodePens:</p>

<p>Link to working <code>HTML/CSS</code>: <a href="http://codepen.io/Ben10/pen/VjBgyB" rel="nofollow">http://codepen.io/Ben10/pen/VjBgyB</a></p>

<p>Link to working <code>HTML / Faulty CSS</code>: <a href="http://codepen.io/Ben10/pen/pbkYAd" rel="nofollow">http://codepen.io/Ben10/pen/pbkYAd</a></p>

<p>Many thanks if you can help me.</p>