flex containers wont alight properly [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I've been trying to make a row with 3 elements, but the third one just won't fit I've tried: changing the justify-content I've tried adding a flex:1 even tho in theory they should already have that. I've tried removing the margins beacaus I thought the flex containers may be too big to fit 3 of them in one row, but it didn't help.enter image description here
<div id="myprojects">
<div class="pr_cont">
<img id="project_img" src="images/img04.png" alt="">
<div class="project_div">
<p id="project_textA">Nascetur nunc varius commodo</p><br><br>
<p id="project_textB">Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p><br><br>
View more
</div>
</div>
<div class="pr_cont">
<img id="project_img" src="images/img04.png" alt="">
<div class="project_div">
<p id="project_textA">Nascetur nunc varius commodo</p><br><br>
<p id="project_textB">Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p><br><br>
View more
</div>
<div class="pr_cont">
<img id="project_img" src="images/img04.png" alt="">
<div class="project_div">
<p id="project_textA">Nascetur nunc varius commodo</p><br><br>
<p id="project_textB">Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p><br><br>
View more
</div>
</div>
.
#myprojects {
display: flex;
justify-content:space-around;
width: 90%;
height: 50px;
margin: 0% 5% 0 5%;
}
.pr_cont {
margin: 0 5%;
width: 100%;
border-radius: 10px;
width: 400px;
}
#project_img {
border-radius: 10px 10px 0 0;
}
.project_div {
background-color: #333;
height: 250px;
width: 400px;
border-radius: 0 0 10px 10px;
}
#project_textA {
margin-top: -4px;
border-radius: 0 0 10px 10px;
color: white;
text-align:center;
padding-top: 30px;
font-size: 24px;
font-weight: 400;
}
#project_textB {
margin: 0;
font-size: 18px;
color: gray;
text-align: center;
}
#more_box {
text-decoration: none;
text-align: center;
color: white;
width: 10%;
margin: 0 5%;
background-color: #bd00ff;
padding: 20px 36%;
border-radius: 10px;
}

Answer 1

It seems an issue on your html, I am missing a </div> before the last item so it is being shown inside of the second one:
<div id="myprojects">
<div class="pr_cont">
...
</div>
<div class="pr_cont">
...
<div class="pr_cont">
...
</div>
</div>
So it should be like:
<div id="myprojects">
<div class="pr_cont">
...
</div>
<div class="pr_cont">
...
</div>
<div class="pr_cont">
...
</div>
</div>