I'm having an issue with positioning items in a div of 11 elements divided into 2 columns. The first row and the last item are positioned correctly, but the items in between are shifted to the left. I've been using flexbox for a while, but I can't seem to find any issues in my code.
https://i.sstatic.net/prKle.jpg
Here is my HTML code:
<div class="postview">
<?php while ($_posts->have_posts()): $_posts->the_post();?>
<h1><a class="post-link" href="<?php the_permalink(); ?>"></h1>
<div class="posts-layout">
<h1><?php the_title(); ?></h1>
<img src="<?php the_post_thumbnail_url('post-picture'); ?>" alt="">
</div>
</a>
</div>
.postview {
width: 65vw;
background-color: rgb(243, 243, 243);
margin: auto;
display: flex;
flex-direction: initial;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
margin-top: 8vh;
margin-bottom: 4vh;
}
.post-link {
text-decoration: none;
color: black;
}
.posts-layout {
height: 100%;
background-color: rgb(206, 45, 45);
width: 30vw;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.posts-layout h1 {
font-size: 2vh;
color: black;
}