width of main page or / and spaces between posts

So i tried to make boxes (in main page) representing blog posts smaller and to fit 4 in one line. I used this:
.posts .post {
display: block;
width: 21%;
margin-top: 3.95%;
padding-bottom: 21%;
float: left;
position: relative;
background-size: cover;
background-position: center;
it works fine except that last box (blog post) is “glued” to a third one – there is no space between them. Any ideas? i thought might be increasing page width would help, but cant find how to do that as well.. any thoughts?
Thank you.
it looks like this: https://www.3dandart.eu/