How do I make the content of this section go from top to down in mobile screen? the content starts to overlap.

<section class="project container">
     <div class="my-project-text">
        <div class="my-project-text-inside">
        <h1 class="h1">My Projects</h1>
        <p>Here are some of the projects ive done</p>
        <p>See my full portfolio:</p>
        <a href=""><i class="fa-brands fa-dribbble"></i></a>
        
      </div> 
     </div>  
    <div class="card-gallery">
        <div class="card">
            <img src="img1.jpg" alt="">
            <h3>card 1 image</h3>
        </div>
        <div class="card">
            <img src="img1.jpg" alt="">
            <h3>Potrait sketch</h3>
            
        </div>
        <div class="card">
            <img src="img1.jpg" alt="">
            <h3>card 1 image</h3>
        </div>
        <div class="card">
            <img src="img1.jpg" alt="">
            <h3>card 1 image</h3>
        </div>
        <div class="card">
            <img src="img1.jpg" alt="">
            <h3>card 1 image</h3>
        </div>
# #     </div>
 
    </section>

The contents seem to overlap in mobile view