Center grid div without items get centered - html

Question

Here are my code snippets:
.grades_dashboard_m {}
.three_separation {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 60px;
}
.grades_dashboard_box {
height: 130px;
width: 160px;
background-color: #000000;
color: #ffff;
}
<div class="grades_dashboard_m" id="co_1">
<div class="three_separation">
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
</div>
</div>
As you see the grid div (grades_dashboard_m) is not centered in grades_dashboard_m. How to center it without center the elements in grades_dashboard_m? I already tried this:
.grades_dashboard_m {
display:flex;
justify-content:center;
align-items:center;
}
But without success.
EDIT: I figured out that this is not the problem. The problem is that the content of the 3 grids is not centered. But how to center the content of the grids?

Answer 1

Simply apply margin: 0 auto; to .grades_dashboard_box
likr this
.grades_dashboard_box {
margin: 0 auto;
}
this shall center the element not text.

Answer 2

Pure, CSS Grid Solution
In short, don't use margin: 0 auto to center grid children—use justify-items: center.
.three_separation {
…
justify-items: center;
}
A few words about justify-items from MDN:
In grid layouts, it aligns the items inside their grid areas on the
inline axis
Demo
.grades_dashboard_m {}
.three_separation {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 60px;
justify-items: center; /* <-- Added */
}
.grades_dashboard_box {
height: 130px;
width: 160px;
background-color: #000000;
color: #ffff;
}
<div class="grades_dashboard_m" id="co_1">
<div class="three_separation">
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
<div class='grades_dashboard_box'>
<h1>12</h1>
</div>
</div>
</div>