How do I change padding in flexbox? - css

Question

I am trying to recreate this page using HTML and CSS:
However, I cant seem to get the padding changed for the box on the right. This is what mine looks like so far:
How do I adjust the CSS so that the text doesnt have that big white gap on top? Here is my code:
.flexbox {
margin: 1rem 6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* background-color: grey; */
}
.ten {
height: 100%;
text-align: center;
flex-basis: 40%;
font-size: 25vw;
letter-spacing: -3rem;
}
.yrs-exp {
min-height: 100%;
display: flex;
flex-direction: column;
flex-basis: 18%;
}
.yrs-exp p {
margin-bottom: 2rem;
}
.yrs-exp button {
text-transform: capitalize;
height: 7vh;
width: 80%;
}
.deats {
display: flex;
min-height: 100%;
flex-basis: 30%;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.deat {
display: flex;
align-items: center;
flex-direction: column;
flex-basis: 49%;
border: solid 1px black;
}
.deat h2 {
font-size: 6vw;
margin-bottom: -0.8rem;
}
.deat p {
text-transform: uppercase;
margin-top: 0;
}
<div class="flexbox">
<div class="ten">10</div>
<div class="yrs-exp">
<h1>Years of experience</h1>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>GET IN TOUCH</button>
</div>
<div class="deats">
<div class="deat">
<h2>2k</h2>
<p>Apps developed</p>
</div>
<div class="deat">
<h2>40</h2>
<p>Consultants</p>
</div>
<div class="deat">
<h2>12</h2>
<p>Awards</p>
</div>
<div class="deat">
<h2>160</h2>
<p>Employees</p>
</div>
</div>
</div>
And here it is in a codepen: https://codepen.io/caseycling/pen/yLVdzja

Answer 1

I made a few more changes:
.flexbox {
margin: 1rem 6rem;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
/* background-color: grey; */
}
/* .flexbox > div {
background-color: rgb(206, 89, 89);
} */
.ten {
height: 100%;
text-align: center;
flex-basis: 40%;
font-size: 25vw;
letter-spacing: -3rem;
}
.yrs-exp {
min-height: 100%;
display: flex;
flex-direction: column;
flex-basis: 18%;
}
.yrs-exp p {
margin-bottom: 2rem;
}
.yrs-exp button {
text-transform: capitalize;
height: 7vh;
width: 80%;
}
.deats {
display: flex;
min-height: 100%;
flex-basis: 30%;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.deat {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-basis: 49%;
height: 150px;
border: solid 1px black;
}
.deat h2 {
font-size: 6vw;
margin: 0;
}
.deat p {
text-transform: uppercase;
margin-top: 0;
}
.clients {
display: flex;
margin: 1rem 6rem;
justify-content: space-around;
}
.clients img {
opacity: 0.5;
border: solid 1px rgba(0, 0, 0, 0.5);
}
.clients img:hover {
opacity: 1;
border: solid 1px rgb(0, 0, 0);
}
<div class="flexbox">
<div class="ten">10</div>
<div class="yrs-exp">
<h1>Years of experience</h1>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>GET IN TOUCH</button>
</div>
<div class="deats">
<div class="deat">
<h2>2k</h2>
<p>Apps developed</p>
</div>
<div class="deat">
<h2>40</h2>
<p>Consultants</p>
</div>
<div class="deat">
<h2>12</h2>
<p>Awards</p>
</div>
<div class="deat">
<h2>160</h2>
<p>Employees</p>
</div>
</div>
</div>
<div class="clients">
<a id="client"
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-9-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-10-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-3-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-11-270x117.png"
alt="mittos"
/></a>
</div>