Footer Alignment Issue - Can't Align Everything to the Left - html

Question

I am creating a footer. Almost everything is finished. However, I can't align the "ul" elements perfectly. More specifically, I can't align the elements to the left. Please, take a look at my pen.
https://codepen.io/john9929/pen/yvrWpP
As you can see the sprouts under "CONTACT" and "About us," "Contact us" etc under "INFORMATION" are not aligned perfectly to the left.
Here are my codes for footer:
<!-- footer -->
<div class="footer">
<div class="container">
<div class="w3_footer_grids">
<div class="col-md-3 w3_footer_grid">
<h3>Contact</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
<ul class="address">
<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>info#example.com</li>
<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>[phone]</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Information</h3>
<ul class="info">
<li>About Us</li>
<li>Contact Us</li>
<li>Short Codes</li>
<li>FAQ's</li>
<li>Special Products</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Category</h3>
<ul class="info">
<li>Mobiles</li>
<li>Laptops</li>
<li>Purifiers</li>
<li>Wearables</li>
<li>Kitchen</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Profile</h3>
<ul class="info">
<li>Home</li>
<li>Today's Deals</li>
</ul>
<h4>Follow Us</h4>
<div class="agileits_social_button">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer-copy">
<div class="footer-copy1">
<div class="footer-copy-pos">
<img src="images/arrow.png" alt=" " class="img-responsive" />
</div>
</div>
<div class="container">
<p>© 2017 Electronic Store. All rights reserved </p>
</div>
</div>
</div>
<!-- //footer -->
Here are the CSS codes:
/*-- footer --*/
.footer{
padding:4em 0;
background:#fff;
}
.w3_footer_grid h3{
color: #212121;
font-size: 1.5em;
margin-bottom: 2em;
padding-bottom: .5em;
position: relative;
text-transform: uppercase;
}
.w3_footer_grid h3:after{
content:'';
background:#3c43a4;
width:20%;
height:2px;
position:absolute;
bottom:0;
left:0;
}
.w3_footer_grid p{
color:#999;
line-height:1.8em;
margin-bottom:2em;
}
.w3_footer_grid ul li {
list-style-type: none;
margin-bottom: 1em;
color: #999;
font-size: 14px;
}
.w3_footer_grid ul.address li i {
color:#414141;
border: 1px solid #414141;
padding: .5em;
margin-right: 1em;
}
.w3_footer_grid ul.address li span {
display: block;
margin-left: 3em;
}
.w3_footer_grid ul li a {
color: #999;
text-decoration: none;
}
.w3_footer_grid ul li a:hover {
color:#212121;
}
.w3_footer_grid ul.info li a {
padding-left:2.2em;
background: url(../img/img-sp.png) no-repeat -6px -98px;
}
.w3_footer_grid h4{
margin:2em 0 1em;
font-size:1.2em;
color:#3c43a4;
}
/*-- social-buttons --*/
.agileits_social_button ul li{
display:inline-block;
margin: 0 !important;
}
.agileits_social_button ul li a{
background: url(../img/img-sp.png) no-repeat 1px -130px #414141;
display: block;
width: 35px;
height: 35px;
-webkit-transition:.5s all;
-moz-transition:.5s all;
-o-transition:.5s all;
-ms-transition:.5s all;
transition:.5s all;
}
.agileits_social_button ul li a.twitter{
background-position:-41px -130px;
}
.agileits_social_button ul li a.google{
background-position:-81px -130px;
}
.agileits_social_button ul li a.pinterest{
background-position:-123px -130px;
}
.agileits_social_button ul li a:hover {
background-color: #3c43a4;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.footer-copy1 {
position: relative;
padding: 2em 0 0;
border-bottom: 1px solid #d6d6d6;
}
.footer-copy-pos {
position: absolute;
right: 12%;
bottom: -75%;
width: 50px;
height: 50px;
border: 3px solid #ff5063;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
box-shadow: 0px 0px 5px 0px #ff5063;
-webkit-transition:.5s all;
-moz-transition:.5s all;
transition:.5s all;
}
.footer-copy-pos:hover {
box-shadow: 0px 0px 30px 5px #ff5063;
}
.footer-copy p{
margin:4em 0 0;
text-align:center;
color:#999;
line-height:1.8em;
}
.footer-copy p a{
color:#3c43a4;
text-decoration:none;
}
.footer-copy p a:hover{
color:#999;
}
/*-- //footer --*/
How can I fix this issue?

Answer 1

Try the following code:
.w3_footer_grid ul{
padding-left:0;
}

Answer 2

Your question is not very precise. You want all your <li> elements all the way to the left? Then remove the padding you have given it here:
.w3_footer_grid ul.info li a {
padding-left:2.2em;
background: url(../img/img-sp.png) no-repeat -6px -98px;
}