This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services.
In the photo provided, you can see that the left box is too close to the parent div.
.services {
background-color: lightblue;
display: flex;
height: 60vh;
width: 90%;
margin: auto;
align-items: center;
text-align: center;
}
.qm {
flex: 1;
position: absolute;
width: 277px;
height: 316px;
left: 86px;
top: 1037px;
background: #3C3664;
box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.audit {
flex: 1;
position: absolute;
width: 276px;
height: 316px;
left: 582px;
top: 1037px;
background: #FFFFFF;
box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.pm {
flex: 1;
position: absolute;
width: 276px;
height: 316px;
left: 1077px;
top: 1037px;
background: #FFFFFF;
box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
border-radius: 20px;
float: right;
}<div class="services">
<!-- Quality Management -->
<div class="qm">
<h1>
Quality Management
</h1>
</div>
<!-- Auditing -->
<div class="audit">
<h1>
Auditing
</h1>
</div>
<!-- Project Management -->
<div class="pm">
<h1>
Project Management
</h1>
</div>
</div>