Сообщения в блоге

Я создаю свою собственную тему с нуля и столкнулся с небольшим количеством проблем. На странице блога каждый раз, когда отображается новое сообщение, оно меньше, чем последнее. Это связано с тем, что я установил ширину поста в блоге на 33,3%. Кроме того, каждый блог пост отображается немного правее предыдущего. Как сделать так, чтобы каждое сообщение в блоге составляло 33,3% от области контента и отображалось рядом, по 3 на строку? Я использую WordPress функции для вызова каждого сообщения в блоге. Я только отображаю миниатюру постов в блоге, и когда вы нажимаете на миниатюру, вы переходите к посту. Так в основном 3 изображения рядом.

[БОНУС]: Как я могу заставить текст отображаться горизонтально и вертикально при наведении курсора на каждое изображение в блоге?

Я знаю, что это много, но я пытался решить это в течение нескольких дней. JS Fiddle или Codepen будет принята с благодарностью.

Index.php:

<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>
<div class="blog-posts">
<?php while (have_posts()) : the_post(); ?>
<div class="col-md-4">
<div id="page-content">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>