I have positioned three divs in the center of the webpage, but I am looking to move them further down without relying on margin or padding. My goal is to create more space above the divs so that I can place an image above them. Is it possible to achieve this using flexbox, which I am currently utilizing?
Here is the HTML file:
<main>
<div class="who">
<h1><img class ="who-we" src="https://dsprme.org/lib/images/who.png?222"></h1>
<h2>Who We Are</h2>
<p class="who-info">DSPR is an ecumenical and Church – related organization which is an integral part of the
Middle East Council of Churches (MECC).
It was founded following the 1950 Arab Israeli War and the creation of the Palestine refugee
problem.
</p>
<a class = "Read-more" href="dspr.html">Read More</a>
</div>
<div class="what">
<h1><img class ="work" src="https://dsprme.org/lib/images/what.png?222"></h1>
<h2>What We Do</h2>
<p class="what-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
<a class = "Read-more" href="dspr.html">Read More</a>
</div>
<div class="where">
<h1><img class="jordan" src="https://dsprme.org/lib/images/where.png?222"></h1>
<h2>Where We Work</h2>
<p class="where-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco labori</p>
<a class = "Read-more" href="dspr.html">Read More</a>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
And here is the CSS file:
*{
padding:0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Calibri';
color: #222;
padding-bottom: 50px;
}
header{
height:100px;
display:flex;
justify-content: space-around;
align-items: center;
}
ul{
display:flex;
list-style-type:none;
align-items: center;
justify-content: center;
}
ul li a{
color: rgb(0,0,0);
text-decoration: none;
padding:7px 15px;
transition: all 0.3s ease-in-out;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
display:inline-block;
}
li a:hover::before, li a:hover::after{
width:100%;
left:0;
}
li a::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0%;
height: 2px;
background: #FCAE1E;
transition: all 250ms ease-in-out;
}
li a::after{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
height: 2px;
background: #FCAE1E;
transition: all 250ms ease-in-out;
}
main{
display: flex;
height:calc(100vh - 100px);
align-items: center;
justify-content: space-around;
}
.who{
display: flex;
flex-direction: column;
}
.what{
display: flex;
flex-direction: column;
}
.where{
display: flex;
flex-direction: column;
}
.who-we{
width: 100px;
height: 100px;
}
.work{
width: 100px;
height: 100px;
}
.jordan{
width: 100px;
height: 100px;
}
.who-info{
width: 300px;
font-size: 15px;
}
.Read-more{
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.what-info{
width: 300px;
font-size: 15px;
}
.where-info{
width: 300px;
font-size: 15px;
}