trying to wrap text with flex, not working - html

Question

I am trying to wrap div text with flex but its not working, the title div seems to be overlapping the other post divs, I have tried using line height and applying flex wrap, still no fix. I've also tried centering with css grid but that didn't seem to get either,If anyone can help me with this thank you.
*,
*::before,
*::after {
font-family: Mukta, sans-serif;
}
body {
margin: 0;
padding: 0;
}
#header {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#quote {
display: flex;
font-weight: 300;
font-size: 20px;
}
#name {
font-size: 55px;
}
#navlist {
display: flex;
padding-inline-start: 0px;
gap: 40px;
}
#navlistelm {
padding: 15px 38px;
font-size: 20px;
font-weight: 200;
list-style: none;
}
#navbar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#navimgcontainer {
display: flex;
flex-direction: row;
width: 100%;
height: 70%;
}
img {
height: 500px;
width: 1950px;
}
#aboutcontainer {
display: flex;
width: 80%;
height: 100%;
gap: 40px;
}
#about {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 100%;
}
#aboutText {
display: flex;
font-size: 20px;
font-weight: 400;
flex-direction: column;
gap: 40px;
width: 100%;
}
#abouttitle {
font-weight: 700;
font-size: 40px;
}
#aboutImage {
display: flex;
justify-content: center;
align-items: center;
height: 90%;
width: 50%;
}
#ebookcontainer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80%;
}
#econtainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 75%;
height: 80%;
background-color: #dd927c;
border-radius: 5px;
}
#ebookimage {
display: flex;
width: 45%;
height: 100%;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
#ebook {
height: 585px;
width: 550px;
}
#etext {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
height: 100%;
}
#ebookstuff {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px
}
#egraph {
display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;
}
#ebookdirect {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
}
#ebutton {
border: none;
color: white;
font-size: 30px;
background-color: rgba(201, 115, 116, 255);
border-radius: 5px;
height: 60px;
width: 400px;
}
#ebutton:hover {
cursor: pointer;
}
#subscribelist {
padding: 0px;
list-style: none;
}
#subscribelistelm {
display: flex;
padding: 10px;
}
#footer {
display: flex;
flex-direction: column;
width: 100%;
height: 80%;
}
#text {
display: flex;
gap: 10px;
flex-direction: column;
width: 100%;
height: 20%;
}
#postcontainer {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#post1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
height: 100%;
width: 30%;
}
#postimg {
height: 300px;
width: 300px;
}
#postbutton1 {
border: none;
color: white;
font-size: 20px;
background-color: #de8e7a;
width: 30%;
height: 5%;
}
#post1title {
font-size: 30px;
font-weight: bold;
}
#post1preview {}
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Mukta:wght#200;300;400;500;600&display=swap" rel="stylesheet">
<section id="header">
<div id="name">CAVETTA JOHNSON</div>
<div id="quote">Living life with intention. Live don't just exist.</div>
</section>
<nav id="navbar">
<ul id="navlist">
<li id="navlistelm">Home</li>
<li id="navlistelm">Travel Blog</li>
<li id="navlistelm">ebook</li>
<li id="navlistelm">Merchandise</li>
<li id="navlistelm">1 On 1 Session</li>
<li id="navlistelm">About Us</li>
</ul>
</nav>
<div id="navimgcontainer">
<img src="./images/CAVETTA JOHNSON.png" alt="">
</div>
<section id="about">
<div id="aboutcontainer">
<div id="aboutText">
<div id="abouttitle">I finally decided to start living!</div>
Hey hey hey! My name is Cavetta, and welcome to Life With Vetta. I am a mom to 2 amazing boys. Kal-El 16 And Jor-El 11. I have been divorced and a single mom for a few years now. Juggling raising the men of tomorrow, working, having a life outside of
my boys (nonexistent). We LOVE to travel. I originally moved from Jamaica to California for college. The travel bug had bitten me and the need to see the world and what it has to offer has always been with me. I went on a few cruises before kids,
traveled to different states and cities, exploring and wandering. When I found myself with 2 kids, alone I knew one of my first goals was to show them the world and let them see things outside of their comfort zone. We took our first cruise when
they were itsy bitsy and had a blast. Since then, we traveled the states, city hopping and seeing their home country. We then trotted over to London and Paris when they were older and that struck a chord and lit a fire that was not going to be tamed
by anything but travel and adventure. I had been thinking and considering being a digital nomad.
</div>
<div id="aboutImage">
<img src="./images/IMG_3238.jpg" alt="">
</div>
</div>
</section>
<section id="ebookcontainer">
<div id="econtainer">
<div id="etext">
<div id="ebookstuff">So you want to travel the world
</div>
<div id="egraph">I do not have millions in the bank but I am making it happen without stress or worry.</div>
<div id="ebookdirect">
<button id="ebutton">Download!</button>
</div>
</div>
<div id="ebookimage">
<img src="./images/Digital Download! (1).png" alt="" id="ebook">
</div>
</div>
</section>
<section id="postcontainer">
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOOdddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="post1preview">ssssssddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddds</div>
<button id="postbutton1">Read More!</button>
</div>
</section>
<section id="footer">
<div id="Text">
<div id="title">Subscribe To Follow Our Adventures</div>
<div id="signup">Get the latest updates on where we are and what fabulous experiences we are having!</div>
</div>
<div id="Subscribe">
<form action="api" id="subscribeform">
<ul id="subscribelist">
<li id="subscribelistelm">
<input type="firstname" id="firstname" name="user_firstname" />
</li>
<li id="subscribelistelm">
<input type="lastname" id="lastname" name="user_lastname" />
</li>
<li id="subscribelistelm">
<input type="email">
</li>
<li id="subscribebutton">
<button>Yo</button>
</li>
</form>
</div>
</section>

Answer 1

One solution would be to assign width and word-wrap.
For example for the #post1title id:
#post1title {
font-size: 30px;
font-weight: bold;
width:100%;
word-wrap: break-word;
}