三个div不对齐怎么解决
<style>
*{
margin: 0;
padding: 0;
}
.help{
/* width: 1190px; */
height: 180px;
margin-top: 40px;
}
.end .end-box{
position: relative;
width: 297.5px;
height: 130px;
display: inline-block;
background: chartreuse;
}
.end-box h4{
line-height: 48px;
margin-bottom: 5px;
margin-top: 5px;
}
.help .end-box ul li{
display: inline-block;
margin-right: 10px;
}
.end-box ul li a{
text-decoration: none;
}
.end-box ul li a:hover{
color: crimson;
}
.end .end-box img{
float: left;
width: 32px;
height: 48px;
margin-right: 10px;
margin-left: 10px;
}
</style>
<body>
<div class="help">
<div class="end">
<div class="end-box">
<h4><img src="./imge/规则与协议.png" alt="">规则与协议</h4>
<ul>
<li><a href="#">淘宝规则</a></li>
<li><a href="#">退货退款流程</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">更多特色服务</a></li>
<li><a href="#">平台服务协议</a></li>
<li><a href="#">规则意见征集</a></li>
</ul>
</div>
<div class="end-box">
<h4><img src="./imge/新手上路.png" alt="">新手上路</h4>
<ul>
<li><a href="#">新手专区</a></li>
<li><a href="#">24小时在线帮助</a></li>
<li><a href="#">免费开店</a></li>
</ul>
</div>
<div class="end-box">
<h4><img src="./imge/付款方式.png" alt="">付款方式</h4>
<ul>
<li><a href="#">快捷支付</a></li>
<li><a href="#">信用卡</a></li>
<li><a href="#">余额宝</a></li>
<li><a href="#">蚂蚁花呗</a></li>
</ul>
</div>
<div class="end-box">
<h4><img src="./imge/淘宝特色.png" alt="">淘宝特色</h4>
<ul>
<li><a href="3">手机淘宝</a></li>
<li><a href="3">旺旺/旺信</a></li>
<li><a href="3">大众评选</a></li>
</ul>
</div>
</div>
</div>
</body>
运行结果及报错内容
运行就出现这样，怎么样让三个div对齐
