I am struggling with a section containing two main divs:
<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>
Any suggestions on why the child divs are overlapping instead of wrapping? I have tried adjusting their width, removing flex gap, and increasing size but the issue persists. [Styling Sheet]
Even after decreasing width and eliminating flex gap, the child divs do not wrap when resizing the window, they 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;
}