I am trying to create a layout without using grid or flexbox, I am using `display: inline-block` to achieve that but i have a problem with adjusting spaces.

```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  text-align : justify;
}

.wrapper > div {
  display: block;
  margin-top: 5px;
}

.header {
  background: lightgreen;
  margin-top: 0;
}

.footer {
  background: #eee;
}

.main > div {
  display: inline-block;
  width: 49%;
  height: 20vh;
  background: #eee;
}
```

```html
<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
       <div class="item">item1</div>
       <div class="item">item2</div>
       <div class="item">item3</div>
       <div class="item">item4</div>
    </div>
    <div class="footer">footer</div>
 </div>
```

![enter image description here](https://i.stack.imgur.com/zdWfO.jpg)

I am trying to achieve the same effect as `justify-content: space-between` in flexbox
but i got elements that are not aligned well in the layout.

I can fix the spaces around item4 but using `margin-left` but i don't like this solution.