发短信在小屏幕上的div背景出去

Question

以下是文本的一些图片，它们仅在小屏幕上显示在页脚的背景之外。我没有找到任何令人满意的解决方案，因此以下是两者的屏幕截图：

页脚的背景不够伸展。

以下是 CSS 和 HTML ：

#footer {
    height:35vh;
    /*border:2px dashed red;*/
    background-color:white;
    font-family: brandon;
    color:#004282;
    font-weight:bold;
}

#footer ul {
    list-style: none;
    padding:4% 0 0 4%;
    float:left;
}

#footer ul li {
    padding:18% 0 2% 0;
}

#footer ul li a {
    text-decoration:none;
}

#footer ul li a:hover {
    color:purple;
}

#footer .socialbtn {
    padding:3% 0 1% 0;
}

<div class="container">
  <div class="row">
    <div  id="footer" class="col-lg-12">
      <div class="col-lg-6 col-md-6  fade ">
        <ul>
          <li><a href="#">Our offices</a></li>
          <li><a href="#">Our craft</a></li>
          <li><a href="#">Visit the workshop</a></li>
          <li><a href="#">Be a part of jan traders</a></li>    
        </ul>
      </div>
            
      <div class="socialbtn col-lg-6 col-md-6 fade">
        <ul>
          <li>
            <i class="fa fa-facebook-f" style="color:#3D5B99;font-size:24px; "></i>
          </li>
          <li>
            <i class="fa fa-twitter centre-block" style="color:#32CDFD;font-size:24px; "></i>
          </li>
          <li>
            <i class="fa fa-instagram" style="color:#F9B200;font-size:24px; "></i>
          </li>
        </ul>
      </div>
        
      <!--  
      <ul class="col-lg-4 col-md-4">
        <li>
          <i class="fa fa-facebook-f" style="color:red;font-size:24px;"></i>
        </li>
        <li>
          <i class="fa fa-twitter" style="color:red;font-size:24px;"></i>
        </li>
        <li>
          <i class="fa fa-instagram" style="color:red;font-size:24px;"></i>
        </li>
      </ul>
      -->
        
    </div>    
  </div>
</div>