Responsive Card Menu Content Overflow - html

Question

Its required to create a mobile responsive card menu like this using HTML & CSS:
**
Requirement
**
required design
But the outcome was like the below. The text are going all over,cards aren't centered,and changes the position from device to device:
actual outcome
**
My coding
**
<section id="edu-coursecategory-section" class="ed-coursecategory layout-2">
<style>
* {
box-sizing: border-box;
}
/* Float four columns side by side */
.columncat {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.cardcat {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
width: 80px;
height: 80px;
margin-left: 50%;
font-size: 50%;
}
}
#media screen and (min-width: 780px) {
.ed-coursecategory layout-2 , .isotop-active, .ed-courses layout-2{
display:box;
}
.columncat{
display:none ;
}
}
#media screen and (max-width: 781px) {
.ed-coursecategory layout-2, .isotop-active, .ed-courses layout-2{
display:none;
}
.columncat{
width: auto;
display: box;
margin-bottom: 20px;
}
}
</style>
<div class="row">
<div class="columncat">
<div class="cardcat">
<h3>Technology</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Science</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Math</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Health & Lifestyle</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Language</h3>
</div>
</div>
</div>
</section>
Appreciate if you could support me to achieve the required design.