html 코드 이미지와 텍스트

<style>
    #test-div-wrap{
        display: -ms-flexbox!important;
        display: flex!important;
        -ms-flex-pack: justify!important;
        justify-content: space-between!important;
    }
    #test-div-wrap img{
        max-width: 100%;
    }
    .test-div{
        margin-right: 10px;
    }
    .test-div:last-child{
        margin-right: 0;
    }
    .test-div-bot{
        padding:10px
    }
</style>
<h1 style="text-align: center;margin-bottom: 50px">주요업무</h1>
<div id="test-div-wrap">
    <div class="test-div">
        <img src="https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg" alt="">
        <div class="test-div-bot">
            <h1>테스트</h1>
            <p>테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트</p>
        </div>
    </div>
    <div class="test-div">
        <img src="https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg" alt="">
        <div class="test-div-bot">
            <h1>테스트</h1>
            <p>테스트</p>
        </div>
    </div>
    <div class="test-div">
        <img src="https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg" alt="">
        <div class="test-div-bot">
            <h1>테스트</h1>
            <p>테스트</p>
        </div>
    </div>
    <div class="test-div">
        <img src="https://cdn.pixabay.com/photo/2020/07/06/09/37/green-5376289__340.jpg" alt="">
        <div class="test-div-bot">
            <h1>테스트</h1>
            <p>테스트</p>
        </div>
    </div>
</div>