* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

따라서 했는데 갑자기 카드 박스들이 크게 나오면서 옆으로 나란히 나오던 것이 아래로만 나옵니다!!

작성한 코드 및 에러 메세지

<style>
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }

    .mytittle{
        background-color: black;
        height: 250px;
        width: 100%;
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
        background-position: center;
        background-size: cover;

        color: azure;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .mytitle > button {
        width: 200px;
        height: 50px;
        background-color: transparent;
        color: white;
        border-radius: 50px;
        border: 2px solid white;
        margin-top: 10px;

    }
    .mytitle > button:hover {
         border: 1px solid white;
    }
    .mycomment{
        color: gray;
    }

    .wrap{
        width: 95%;
        max-width: 1200px;
        margin: 20px auto 0px auto;
    }

    .mypost{
        max-width: 500px;
        width: 95%;

        margin: 20px auto 0px auto;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;

        display: none;

    }

    .mybutton {
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .mybutton > button {
        margin-right: 10px;
    }

</style>

<script>

    $(document).ready(function () {
        listing();
    });

    function listing() {
        $('#card-box').empty()
        $.ajax({
        type: "GET",
            url: "http://spartacodingclub.shop/web/api/movie",
            data: {},
            success: function (response) {
                let rows = response['movies']
                for (let i = 0; i < rows.length; i++) {
                    let title = rows[i]['title']
                    let desc = rows[i]['desc']
                    let image = rows[i]['image']
                    let star = rows[i]['star']
                    let comment = rows[i]['comment']
                    console.log(title, desc, image, star, comment)
                    let star_image='⭐'.repeat(star)
                    let temp_html = `

                    <div class="col">
                 <div class="card">
                <img src="${image}"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">${title}.</h5>
                    <p class="card-text">${desc}</p>
                    <p>${star_image}</p>
                    <p class="mycomment">${comment}</p>
                </div>
            </div>
            </div>
                 `

                 $('#card-box').append(temp_html)


             }
         }

      })
    }