我正在创建一个页脚。几乎一切都已完成。但是，我无法完美地对齐“ul”元素。更具体地说，我无法将元素对齐到左侧。请看看我的笔。 https://codepen.io/john9929/pen/yvrWpP
正如您可以看到“联系人”和“关于我们”下的“萌芽”，“联系我们”等“信息”下的萌芽与左侧不完全对齐。
以下是我的页脚代码：
<!-- 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><a href="mailto:info@example.com">info@example.com</a></li>
<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Information</h3>
<ul class="info">
<li><a href="about.html">About Us</a></li>
<li><a href="mail.html">Contact Us</a></li>
<li><a href="codes.html">Short Codes</a></li>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="products.html">Special Products</a></li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Category</h3>
<ul class="info">
<li><a href="products.html">Mobiles</a></li>
<li><a href="products1.html">Laptops</a></li>
<li><a href="products.html">Purifiers</a></li>
<li><a href="products1.html">Wearables</a></li>
<li><a href="products2.html">Kitchen</a></li>
</ul>
</div>
<div class="col-md-3 w3_footer_grid">
<h3>Profile</h3>
<ul class="info">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Today's Deals</a></li>
</ul>
<h4>Follow Us</h4>
<div class="agileits_social_button">
<ul>
<li><a href="#" class="facebook"> </a></li>
<li><a href="#" class="twitter"> </a></li>
<li><a href="#" class="google"> </a></li>
<li><a href="#" class="pinterest"> </a></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer-copy">
<div class="footer-copy1">
<div class="footer-copy-pos">
<a href="#home1"><img src="images/arrow.png" alt=" " class="img-responsive" /></a>
</div>
</div>
<div class="container">
<p>© 2017 Electronic Store. All rights reserved </p>
</div>
</div>
</div>
<!-- //footer -->
以下是CSS代码：
/*-- 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 --*/
如何解决此问题？