html中div内li标签

三个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对齐

img

end-box加一个

overflow:hidden;

使用flex来控制布局是最简单的。