I'm making a personal portfolio, but it only works well with my screen resolution. I've searched and tried a lot of things but still didn't get it to work.
How it is supposed to look like:
.main2 {
display: flex;
flex-direction: column;
background-color: #182436;
padding: 30px 30px 15px 30px;
margin-top: 45px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
border-radius: 15px;
max-width: 100%;
}
.curriculum {
display: inline-block;
vertical-align: top;
}
.titleCurr>h1 {
color: #64ffc6;
position: relative;
bottom: 10px;
font-weight: bold;
font-size: 3.125vw;
text-align: center;
}
.eduCurr>h1 {
color: #f2f2f2;
position: relative;
bottom: 10px;
margin-left: 350px;
}
.centerLine {
border-left: 3px solid #f2f2f2;
height: 450px;
position: absolute;
margin-right: 50%;
margin-left: 50%;
right: 0;
}
.schools>h3 {
color: #f2f2f2;
position: relative;
bottom: 78px;
margin-left: 800px;
font-weight: bold;
}
.schools>h4 {
color: #b1b1b1;
position: relative;
bottom: 37px;
margin-left: 680px;
}
.schools>img {
color: #b1b1b1;
position: relative;
bottom: 80px;
margin-left: 690px;
width: 60px;
max-width: 100%;
}
.schools>p {
color: #f2f2f2;
position: relative;
bottom: 150px;
margin-left: 800px;
}
.schools>hr {
color: #f2f2f2;
display: block;
width: 450px;
position: relative;
bottom: 80px;
margin-left: 680px;
}<div class="main2">
<div id="curr" class="curriculum">
<div class="titleCurr">
<h1>Curriculum</h1>
</div>
<div class="centerLine"></div>
<div class="eduCurr">
<br />
<h1>Education</h1>
</div>
<div class="schools">
<h4>2019-Present</h4>
<h3>Some college</h3>
<img src="https://i.ibb.co/Jjy7qVv/logoIsep.png" alt="College Icon" />
<p>Pursuing a degree in some course.</p>
<hr />
<h4>2016-2019</h4>
<h3>Some school in some city</h3>
<img src="https://i.ibb.co/5v52S84/Logo-Boa-Nova.png" alt="school" />
<p>Completed highschool in Science and Technology.</p>
</div>