Text going out of div background on small screen - html

Question

Here are some images of the text which is going out of the footer's background, only on small screens. I didn't find any satisfying solution, so here are the screen shots of both:
The background of the footer is not stretching enough.
Here is the CSS and 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>Our offices</li>
<li>Our craft</li>
<li>Visit the workshop</li>
<li>Be a part of jan traders</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>