I can't seem to figure out how to center this div on every device

Question

I'm a css amateur and I've been trying to get these divs centered in the middle of the page on every device and yes I have searched all over the internet and attempted solutions with no results to getting them centered.

Here's my code:

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>

Any help would be appreciated, thank you.

@B.J.A.A. by the way I tried your answer and it didn't work, Wimanicesir's answer worked for me. — Seytious, Nov 04 '19 at 18:38
Look up about [Bootstrap](https://getbootstrap.com/). It's a life saver! ;) It's a CSS toolkit that you **don't** have to code yourself. You just need to call them in your HTML file with classes. It's easier and faster for front-end devs. — pensum, Nov 04 '19 at 19:06

score 3 · Accepted Answer · answered Nov 04 '19 at 18:33

Remove the float left from the class 'djfl-box-col', and add an auto margin:

: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 {
    margin: 0 auto;
}

.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>

Documentation: https://www.w3schools.com/css/css_align.asp

it told me "You can accept this answer in 5 minutes" so I had to wait — Seytious, Nov 04 '19 at 18:46

score 1 · Answer 2 · answered Nov 04 '19 at 19:03

Try getting rid of all your padding then wrap everything in outer div. Also you can remove of all your position properties. Then give the outer div a width of whatever you want in percentage and a margin auto property.

.outer-wrapper{
      width: 50%;
      margin: auto;
   }

You had a lot of styles that are not being used. I cleaned them up in this code snippet. Hope it helps.

I can't seem to figure out how to center this div on every device

2 Answers2