As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success.
Check out my code below:
Snippet:
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h3 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h3 {
font-size: 24px;
}
p {
margin: 0 0 10px;
}
.djfl-box-col-2,
.djfl-box-col {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.djfl-box-col {
float: left;
}
.djfl-box-col {
width: 50%;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
}
.djfl-box {
border-radius: 2px;
position: relative;
display: block;
margin-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.djfl-box>.djfl-box-inner {
padding: 10px;
}
.djfl-box>.djfl-box-header {
position: relative;
text-align: center;
padding: 3px 0;
color: #fff;
color: rgba(255, 255, 255, 0.8);
display: block;
z-index: 10;
background: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.djfl-box h3 {
font-size: 38px;
font-weight: bold;
margin: 0 0 10px 0;
white-space: nowrap;
padding: 0;
}
.djfl-box h3,
.djfl-box p {
z-index: 5;
}
.djfl-box:hover {
text-decoration: none;
color: #f9f9f9;
}
.djfl-box-col {
padding: 0px 85px;
}
.djfl-box {
text-align: center;
}
.djfl-box p {
font-size: 12px;
}
.bg-green {
color: #fff !important;
}
.bg-green {
background-color: #00a65a !important;
}<div class="djfl-box-col-2 djfl-box-col">
<div class="djfl-box bg-green">
<div class="djfl-box-header">Trees Planted</div>
<div class="djfl-box-inner">
<h3>12,690,517</h3>
<p>Trees</p>
</div>
</div>
</div>I would greatly appreciate any assistance. Thank you.