저기 이렇게 코드를 만들어서 했는데 이미지 끼리 너무 가깝고 약간 겹치는 느낌이 있는데 약간 띄우려면 어떻게 해야 하나요?

저기 빨간색 부분의 너무 붙여져 있어서 약간 띄우려면 어떻게 해야

작성한 코드 및 에러 메세지

   
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyD_rpLs5yBtdZYrJJASNcJMKL62geEaBoA",
            authDomain: "sparta-a18f9.firebaseapp.com",
            projectId: "sparta-a18f9",
            storageBucket: "sparta-a18f9.appspot.com",
            messagingSenderId: "1044785422698",
            appId: "1:1044785422698:web:41d35d4a83d3259c01c513",
            measurementId: "G-F1M3VRSEK7"
        };


        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);


        // 데이터 추가
        $("#addBtn").click(async function () {
            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
            let image = $('#image').val();
            let title = $('#title').val();
            let star = $('#star').val();
            let comment = $('#comment').val();


            let doc = {
                'image': image,
                'title': title,
                'star': star,
                'comment': comment
            };
            await addDoc(collection(db, "foods"), doc);
            alert("음식이 추가 되었습니다!");
            window.location.reload();


        });




        // 데이터 읽기 및 카드 생성
        let docs = await getDocs(collection(db, "foods"));
        console.log(docs);
        docs.forEach((doc) => {
            let row = doc.data();
            let image = row["image"];
            let title = row["title"];
            let comment = row["comment"];
            let star = row["star"];



            // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,
            // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.
            let temp_html = ` 
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h4 class="card-title">${title}</h4>
                        <p class="card-text">${comment}</p>
                        <p>${star}</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>`;
            $("#card").append(temp_html);
        });


    </script>
:
:
:
:
<!-- 부트스트랩 카드 적용-->
    <div class="mycards">
        <div id="card" class="row row-cols-3 row-cols-md-3">

아 그리고 코드에서 문제 되는 건 없죠?