Bootstrap 3 - 页脚坐在页面右侧

Question

出于某种原因，我的页脚位于页面右侧。我无法弄清楚造成它的原因。

这是html

<footer class="footer">
    <div class="container">
      <div class="navbar-social-accs pull-left">
        <nav>
          <h4>Boring Links</h4>

          <ul class="pull-left">
            <li>
              <%= link_to "About", about_path %>
            </li>
            <li>
              <%= link_to "Contact", contact_path %>
            </li>
            <li>
              <%= link_to "Terms", root_path %>
            </li>
            <li>
              <%= link_to "Privacy Policy", root_path %>
            </li>
          </ul>
        </nav>
      </div>

      <div class="navbar-social-accs pull-right">
        <nav>
          <h4>Follow Us!</h4>
          <ul>
            <li>
              <%= link_to "About", about_path %>
            </li>
            <li>
              <%= link_to "Contact", contact_path %>
            </li>
            <li>
              <%= link_to "Terms", root_path %>
            </li>
            <li>
              <%= link_to "Privacy Policy", root_path %>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</footer>

CSS

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  color: $gray;
  a {
    color: $black-gray;
    &:hover {
      color: $black-gray;
    }
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 150px;
  background-color: #f5f5f5;
  ul{ padding:15px;
    li { list-style-type: none; }

    }
}

我会添加填充，如果它左边只有空白区域，但它实际上是向右推，这使得页面比它应该更宽，并抛出中心的页脚。