Div with flex wrap not wrapping but overlapping instead – Html

I have a section with two main div:

<section class="about-us" id="about-us">
            <div class="abtus-img">
                <img src="/images/about-us.jpeg" alt="Patricia and Midel">
            </div>
            <div class="content">

                <div class="abtus-text">
                    <h3>Today is God's</h3>
                    <h3>Unfailing faithfulness</h3>
                    <h3>WE</h3>
                </div>
    
                <div class="main-text">
                    <h1>Name</h1>
                    <p>and</p>
                    <h1>Name</h1>
                </div>

                <div class="info">
                    <div class="info-p">
                        <p>Invite you to share the beginning of our new life together as we unite and make our blessed commitment to God and to each other in Holy Sacrament of Matrimony
                        </p>
                    </div>
                    <div class="main-info">
            
                    </div>
                </div>
            </div>
        </section>

and I have provided a SC of my css, I am just wonderign why the child divs are overlapping instead of wrapping.. i have remove gap, reduce their width or increase their width but I can’t seem to solve the problem [Styling Sheet]

I have tried reducing their width, removing the flex gap but instead of wrapping when resizing the window it will just overlap.

main .about-us {
    display: flex;
    width:90%;
    height:70vh;
    border-bottom: 2px solid black;
    margin-bottom: 2em;
    flex-wrap: wrap;
}

main .about-us .abtus-img {
    width:60%;
    border-right: 1px solid black;
    display: flex;
    justify-content: center;
    align-self: center;
}

main .about-us .abtus-img img {
    height:40em;
    width:30em;

}

main .about-us .content {
    width:40%;
    height:50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 2em;
    justify-content: space-evenly;


}

main .about-us .content .main-info {
    width:60%;
    margin-top: 2em;
}
main .about-us .content .info {
    margin-top: 1em;
}

main .about-us .content .main-text {
    margin-top: 2em;
    line-height:3.5em;
}
main .about-us .content .main-text h1 {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 2.2em;

}

main .about-us .content .main-text p{
    font-family: 'Dancing Script', cursive;
    font-size: 1.3em;
}