Footer not aligning to the bottom of the page - html

Question

When I added the footer to my website it was on the bottom of all the pages except just one. On that specific page my footer behaves like there's no content at all, maybe it overlaps somehow with the main content of the page, but I can't figure out how to resolve that issue.
Here's the html of my footer:
<footer class="bottom-footer text-center">
<hr>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-justified">
<li>
<div class="container">
<p class="navbar-text pull-left brand-name">
Symphony © 2015
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-envelope"></span>  Subscribe to our Newsletter</a>
</div>
</li>
</ul>
</div>
</div>
</footer>
And here's the css:
footer.bottom-footer {
position: relative;
clear: both !important;
z-index: 999999 !important;
bottom: 0 !important;
width: 100% !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
footer.bottom-footer hr {
margin-top: 150px !important;
}
footer.bottom-footer .brand-name {
font-family: 'Bitter', serif;
}
as you can see, it's pretty simple. But for some reason it behaves weird on one particular page of my website. Here's the codepen with the code and here's the full page view to make it easier to understand what my problem is.
Could you please help me with resolving that weird issue?

Answer 1

please try this css...
footer.bottom-footer {
position: relative;
clear: both !important;
z-index: 999999 !important;
bottom: 0 !important;
width: 100% !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
footer.bottom-footer hr {
margin-top: 150px !important;
}
footer.bottom-footer .brand-name {
font-family: 'Bitter', serif;
}
a {
background-color: transparent;
padding-left: 316px;
}