wordpress index.phpの各ブログ記事タイトルまわりのCSSについて

Question

index.php（固定ページを使用しないときのデフォルトのトップページといえばいいんでしょうか）を表示したときに
表示される各ブログ記事のタイトルとともに、記事につけられた「いいね」数を一緒に表示させたく、表示はできたのですが、なんというか間延びして表示されてしまいます。
おそらくCSSに手を加える必要があるのだと思いますが、素人ながら一日中あれこれしてみたものの思い通りの表示になりませんでした。

wordpressのバージョン：5.5.1
テーマ：TwentySeventeen
いいねのプラグイン：WP-PosTRatings

★やったこと
index.phpで、該当する部分のclassが「class="site-main"」とあったので、style.cssの「site-main」と記載してある部分に手を加えてみましたが、表示が変わりませんでした。
次に、chromeのデベロッパーツールで確認したところ「class="post-85 post type-post status-publish format-standard hentry category-1"」の部分にカーソルをあてた際、下記の図のようにcontent（水色部分）、padding（紫部分）が表示されたので、おそらくここに手を加えればよいのかと思いますが、これがCSSのどこに該当するかわかりませんでした。

わかりづらい説明で恐縮ですが、この辺に手を加えればいいよ、というアドバイスが頂けたらと思います。宜しくお願い致します。
※style.cssファイルが4000行以上あり、文字数制限に抵触するので今はファイル内容を記載しませんが、ご要望があれば部分的？に記載します。

//index.php の内容です
<?php
get_header(); ?>

<div class="wrap">
	<?php if ( is_home() && ! is_front_page() ) : ?>
		<header class="page-header">
			<h1 class="page-title"><?php single_post_title(); ?></h1>
		</header>
	<?php else : ?>
	<header class="page-header">
		<h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
	</header>
	<?php endif; ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<?php
			if ( have_posts() ) :

			// Start the Loop.
			while ( have_posts() ) :
				the_post();
			
			/*
		         * Include the Post-Format-specific template for the content.
			 * If you want to override this in a child theme, then include a file
			 * called content-___.php (where ___ is the Post Format name) and that
			 * will be used instead.
			 */
			get_template_part( 'template-parts/post/content', get_post_format() );
			echo the_ratings_results(get_the_id());   //この一行が「いいね」の表示部分です。
			endwhile;

			the_posts_pagination(
					array(
						'prev_text'          => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
						'next_text'          => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
						'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
					)
				);

			else :
				get_template_part( 'template-parts/post/content', 'none' );
			endif;
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php
get_footer();

Answer 1

get_template_part( 'template-parts/post/content', get_post_format() );
echo the_ratings_results(get_the_id()); //この一行が「いいね」の表示部分です。

「template-parts/post/content」が1つの投稿を表示するテンプレートです。
その外でいいねを表示しているので空間ができていると思います。
contentテンプレート内でいいねを表示するのが自然です。
そうすることによってarticleの中にいいねが表示されるようになりますので、
スタイル調整もやり易くなると思います。

現状のままでもCSSで調整可能ですが、一度上記をお試しください。

Comments

[退会済みユーザー]

ご指摘ありがとうございました。
「template-parts/post/content」に記述することで、見栄え良く収まることができました。
初心者の自分ではたどりつけない方法でした。勉強になりました。
この度はお忙しいところお助け頂き、ありがとうございました。