如何阻止我的页脚延伸几个像素？我的HTML边框

Question

请参阅以下内容：

正如你所看到的，页脚突出了几个像素并破坏了我的边界。

我已应用以下css：

    html:before, html:before {
        content: "";
        position: fixed;
        background: #124381;
        left: 0;
        right: 0;
        height: 10px;
    }

    html:before {
        top: 0;
    }
    html:after {
        bottom: 0;
    }
    html   {
        border-left: 10px solid #124381;
        border-right: 10px solid #124381;  
    }

.footer {
    padding-top: 5px;
    background-color:#fff;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:35px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
  }

我的页脚只包含以下内容：

<div class="footer">
  <div class="container">
    <p>
      <a href="http://www.twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a>
      <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a>
    </p>
  </div>
</div>

我真的想摆脱突出的页脚，但无法弄清楚如何。

由于