not sure why flexbox is not working as expected - html

Question

I would like my site to look as in this design:
so I tried to create a flexbox with a horizontal display, and each activity will be a flexbox with a column display.
for some reason, it did not work as expected.
I also looked int a possibility of using grid, but it does not seem to offer a solution
something is not working right. wondering whether anyone can enlighten me.
thanks!!!
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities"
<div class="upload" >
<img src="./images/upload.svg" alt="upload">
<div class="info">
<h6>Upload your leads</h6>
<p >
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling" >
<img src="./images/calling.svg" alt="calling">
<div class="info">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script" >
<img src="./images/script.svg" alt="script">
<div class="info">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>
/* *** launch container **** */
.launch-container {
/* display: flex; */
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
justify-content: space-between;
}
.launch-activities
.upload, .calling, .script,
.info p {
color: #1E95EE;
width: 250px;
text-align: left;
display: inline-block;
}
.launch-activities
.upload, .calling, .script,
.info h6 {
font-size: 20px;
font-weight: bolder;
color: #1E95EE;
text-align: left;
}
.launch-activities .upload{
display: flex;
flex-direction: column;
}
.launch-activities .calling{
display: flex;
flex-direction: column;
}
.launch-activities .script{
display: flex;
flex-direction: column;
}
.launch-activities
.upload, .calling, .script,
img {
display: inline;
}

Answer 1

Instead of having all the code for Rome, I suggest that you build the skeleton first, and then add onto it. It seems your wanted .launch-container to be a flex container, which is correct, but for some reason you commented it out, making it a non-flex container. So how can items flow as flex items inside of it?
You also seem to make each flex item in turn another flexbox. That is possible, but from your layout for each section, it seems they don't have to be... they can just be old traditional CSS.
But I suggest you get the skeleton right, and then add a little bit on top of it, and ask another question if one thing doesn't seem to work correctly. Right now you are like putting the whole Rome here and ask how to fix it.
A skeleton:
also on https://jsfiddle.net/gyuL0e3s/2/
/* *** launch container **** */
.launch-container {
display: flex;
color: #1E95EE;
width: 600px;
height: 200px;
align-items: center;
justify-content: space-around;
border: 1px dotted blue;
}
.launch-container .container-item {
border: 1px dotted orange;
width: 100px;
height: 80px;
}
<!-- **** launch container ****** -->
<section class="launch-container">
<div class="launch container-item">
</div>
<div class="launch-activities container-item">
</div>
<div class="calling container-item">
</div>
<div class="script container-item">
</div>
</section>

Answer 2

Need to fix your html mark up first. And in your CSS, you have specified flex-direction as "column" under .upload, .script and .calling. That's why you are seeing the image, heading and description in vertical alignment.
/* *** launch container **** */
.launch-container {
/* display: flex; */
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
justify-content: space-between;
}
.launch-activities
.upload, .calling, .script,
.info p {
color: #1E95EE;
width: 250px;
text-align: left;
}
.launch-activities
.upload, .calling, .script,
.info h6 {
font-size: 20px;
font-weight: bolder;
color: #1E95EE;
text-align: left;
margin: 2px 0 0 0;
}
.info {
margin:0 0 0 15px;
}
.upload, .calling, .script {
display: flex;
}
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities">
<div class="upload" >
<img src="./images/upload.svg" alt="upload">
<div class="info">
<h6>Upload your leads</h6>
<p >
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling" >
<img src="./images/calling.svg" alt="calling">
<div class="info">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script" >
<img src="./images/script.svg" alt="script">
<div class="info">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>

Answer 3

ok, solved it.
with nested flexboxes, as follows:
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities">
<div class="upload container-item" >
<div >
<img src="./images/upload.svg" alt="upload">
</div>
<div class="information">
<h6>Upload your leads</h6>
<p>
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling container-item" >
<div>
<img src="./images/calling.svg" alt="calling">
</div>
<div class="information">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script container-item" >
<div class="information">
<img src="./images/script.svg" alt="script">
</div>
<div class="information">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>
/* *** launch container **** */
.launch-container {
display: flex;
flex-direction: column;
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
color: #1E95EE;
width: 1280px;
/* height: 700px; */
margin-right: 120px;
margin-left: 120px;
align-items: top;
justify-content:space-between;
border: 1px dotted blue;
}
.container-item {
border: 1px dotted orange;
display: flex;
width: 300px;
justify-content: space-between;
/* height: 110px; */ */
}
.container-item img {
margin-left: 0;
margin-top: 0;
}
.container-item h6 {
font-size: 20px;
font-weight: 550;
color: #1E95EE;
text-align: left;
padding: 0;
margin-top: 0;
margin-bottom: 0;
/* margin: 2px 0 0 0; */
}
.container-item p {
font-size: 14px;
font-weight: 400;
color: #1E95EE;
width: 250px;
text-align: left;
margin-top: 6px;
}
.information {
display: flex;
flex-direction: column;
}
.launch-activities .upload{
display: flex;
}
.launch-activities .calling{
display: flex;
}
.launch-activities .script{
display: flex;
}