页脚未对齐页面底部

Question

当我将页脚添加到我的网站时，除了一个页面之外，它位于所有页面的底部。在那个特定的页面上，我的页脚表现得就像没有任何内容一样，也许它与页面的主要内容有某种重叠，但我无法弄清楚如何解决这个问题。

这是我的页脚的HTML：

<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">
                        <a href="/">Symphony © 2015</a>
                      </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>

这是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;
}

正如您所看到的，它非常简单。但由于某种原因，它在我网站的某个特定页面上表现得很奇怪。这是codepen with the code，这里是full page view，以便更容易理解我的问题。

你能帮我解决这个奇怪的问题吗？