I need to center these 2 rows in the middle like this. I am trying not to use flex. 
[![enter image description here](https://i.stack.imgur.com/NgmjO.png)](https://i.stack.imgur.com/NgmjO.png)

<https://codepen.io/anon/pen/WjyxME>

```
 <section class="content">
  <div class="row">
    <div class="square" id="square-1"></div>
    <div class="square" id="square-2"></div>
    <div class="square" id="square-3"></div>
    <div class="square" id="square-4"></div>
  </div>
  <div class="row">
    <div class="square" id="square-5"></div>
  </div>
</section>

```

>

```
.content {
    font-size: 0;
}

.square {
    height: 10rem;
    width: 118px;
    display: inline-block;
    margin: 1rem 1.5%;
    background: #000000;
}

```