Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping.
The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I need to adjust the margin for each box individually to prevent this problem. How can I accomplish this?
Here is the current CSS code:
.three_separation {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 60px;
}
.grades_dashboard_box {
height: 130px;
width: 320px;
background-color: #0d0d0d;
color: #ffffff;
margin: 0 auto;
position: relative;
}
.grade_display {
float: left;
font-size: 60px;
}
.vertical_center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<div class="three_separation">
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_best">2.3</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Best Grade Average</p>
<p id="grade_display_best_sub" style="font-size: 20px;">Biology</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_average">13.70</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Average Grade</p>
</div>
</div>
</div>
<div class='grades_dashboard_box'>
<div class="vertical_center">
<h1 class="grade_display" id="grade_display_worst">3.4</h1>
<div class="vertical_center grade_info" style="margin-left: 100px;">
<p style="font-size: 15px;">Worst Grade Average</p>
<p id="grade_display_worst_sub" style="font-size: 20px;">German</p>
</div>
</div>
</div>
</div>