我的H3标题与上级div不一致

Question

我正在尝试使我的网站的一部分具有3个框，其中包括顶部框内的图像以及标题和一小段。我遇到的问题是我的h3标题与div父项未正确对齐。

hr.headerline {
    color: #EFCC90;
    margin-left: 45%;
    margin-right: 45%;
    border-width: 7px;
    border-style: solid;
}

ul.boxInfo {
    text-align: center;
}

ul.boxInfo li div {
    background: #EFCC90;
    display: inline-flex;
    width: 20%;
    height: 475px;
}

ul.boxInfo li {
    list-style: none;
    display: inline;
    margin: 10px;
}

.boxImg {
    width: 100%;
    height: 50%;
}

h3.boxTxt {
    background-color: red;
}

    <ul class="boxInfo">
        <li>
            <div class="box">
                <img class="boxImg" src="Images/moonSQ.jpg">
                <h3 class="boxTxt">Large Fleet Of Modern Aircraft</h3>
            </div>
        </li>
        <li>
            <div class="box">
                <img class="boxImg" src="Images/tigerLand.webp">
                <h3 class="boxTxt">Professional And Friendly Environment</h3>
            </div>
        </li>
        <li>
            <div class="box">
                <img class="boxImg" src="Images/A380SQ.webp">
                <h3 class="boxTxt">Continuous Pilot Feedback</h3>
            </div>
        </li>
    </ul

红色突出显示的是我要放置在“金色”框中的标题。当然，有一张图像占据了您无法正确看到的一半。我将如何移动此文本以使其正确对齐？