I cant figure out how to add spacing to my bootstrap cards and my page keeps overlapping when I scroll up to the cards section

Question

I'm creating a landing page that has different sections upon scroll. I have 2 issues.

1. When I scroll down, the content of the second section overlaps the top section of the page when I make the screen smaller.
2. i want to have even spacing between my cards, and i've tried everything, but if i add spacing.. then it pushes the cards to a whole new line. I want 2 cards with even spacing on each row.

HTML CODE AND CSS CODE:

#home{
    background-color: #22AADF;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top 60px center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#home h1{
    font-size: 3rem;
    color: #1F4682;
}
#home span{
    color: #fff;
}
#home h4{
    color: #fff;
    font-weight: 400;
}
#home .img {
    width: 100%;
    height: 100%;
}
#benefits {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}
#benefits .benefit{
    border: 3px solid #1F4682;
    border-radius: 10px;
    color: #fff;
    background-color: #22aadf;
}
#benefits .benefit .benefit-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 1.5em;
    text-align: center;
    margin: 15px;
}
#benefits .benefit i{
    margin-right: 20px;
}
#benefits .benefit h4{
     margin-top: 2px;
}
#benefits hr{
    color: #1F4682;
    width: 100%;
    height: 2px;
}

<section id="home">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-6 col-md-6 col-12">
                    <h1 class="mb-5">Unlock the Power of <span>Artifical Intelligence</span> for Personalization and Customer Engagement.</h1>
                    <h4 class="mb-4">Elevate Your Marketing with Our Latest E-book.</h4>
                    <button>DOWNLOAD NOW</button>   
                </div>
                <div class="hero2 col-lg-6 col-md-6 col-12">
                    <img class="img img-fluid" src="ai2.png" alt="img-of-ai">
                </div>
            </div>
        </div>
    </section>
    
        
    <section id="benefits">
        <div class="row container mx-auto">
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>
            <div class="benefit text-center mb-5 col-lg-6 col-md-6 col-12">
                <div class="benefit-header">
                    <i class="fa-solid fa-person-arrow-up-from-line"></i>
                    <h4>Boost Customer Engagement</h4>
                </div>
                <hr>
                <p>AI algorithms analyze user behavior and preferences to deliver relevant content, increasing user engagement and interaction with your brand.</p>
            </div>

Answer 1

I produced a code snipped myself and found out the following:

Question 1

it's because on mobile, the cards are bigger in height, than the screen size. Remove the 100vh on #benefits for small screens. Maybe for #home too if you are not 100% sure all its content will definitely fit into a mobile viewport (height wise).

Question 2

not applicable with the given code example, There are only 3 cards, there can't be "2 for each row", since it will be only one row that has 2 cards.

If there will be more cards then you can do the following:

on #benefits:

display: flex;
flex-direction: row; //not column
align-content: space-around;
flex-wrap: wrap; //important to have rows

on .benefit:

put the width with the col-classes and add a margin-bottom