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

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

★やったこと
index.php は、デフォルトのファイル内容に、いいねを表示するための「echo the_ratings_results(get_the_id()); 」だけ追記しています。
追記した箇所のclassが「class="site-main"」とあるので、style.cssの「site-main」にあたる場所にいろいろ手を加えてみたのですが、うまくいきません。
chromeのデベロッパーツールで表示させてみたところ「class="post-85 type-post status-publish format-standard hentry category-1"」の記述部分にカーソルを合わせると、図のようにcontent部分（水色部分）、padding部分（紫部分）が表示され、ここに手を加えればいいのかと思うのですが、これがCSSのどこに該当するのかがわかりません。

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

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

//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();

//個別投稿のテーマファイル：single.phpの内容 
<?php
get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		
			<main id="main" class="site-main" role="main">

			<?php
			// Start the Loop.
			while ( have_posts() ) :
				the_post();

				get_template_part( 'template-parts/post/content', get_post_format() );

				//いいねボタン 
				if(function_exists('the_ratings')) { the_ratings(); } 
				
				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;
			endwhile; // End the loop.
			?>
			    		
		</main><!-- #main -->
		<a href= "http://onetokyo.fem.jp/" >一覧に戻る</a>
	</div><!-- #primary -->
	<!-- <?php get_sidebar(); ?> 
</div><!-- .wrap -->

<?php
get_footer();

//個別投稿のテンプレートファイル：content.php (template-parts/post/content.php)

<?php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php
	if ( is_sticky() && is_home() ) :
		echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
	endif;
	?>
	<header class="entry-header">
		<?php
		if ( 'post' === get_post_type() ) {
			echo '<div class="entry-meta">';
			if ( is_single() ) {
				twentyseventeen_posted_on();
			} else {
				echo twentyseventeen_time_link();
				twentyseventeen_edit_link();
			};
			echo '</div><!-- .entry-meta -->';
		};

		if ( is_single() ) {
			the_title( '<h1 class="entry-title">', '</h1>' );
		} elseif ( is_front_page() && is_home() ) {
			the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
		} else {
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		}
		?>
	</header><!-- .entry-header -->

	<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
		<div class="post-thumbnail">
			<a href="<?php the_permalink(); ?>">
				<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
			</a>
		</div><!-- .post-thumbnail -->
	<?php endif; ?>

	<div class="entry-content">
		<?php
		the_content(
			sprintf(
				/* translators: %s: Post title. */
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			)
		);

		wp_link_pages(
			array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<?php
	if ( is_single() ) {
		twentyseventeen_entry_footer();
	}
	?>

</article><!-- #post-<?php the_ID(); ?> -->

//style.cssの「site-main」に関連した部分のみ抜粋：その1

/* Blog landing, search, archives */

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding-bottom: 1em;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding: 1em 0;
}

body:not(.twentyseventeen-front-page) .entry-header,
body:not(.twentyseventeen-front-page) .entry-content,
body:not(.twentyseventeen-front-page) #comments {
	margin-left: auto;
	margin-right: auto;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding-top: 0;
}

.blog .entry-meta a.post-edit-link,
.archive .entry-meta a.post-edit-link,
.search .entry-meta a.post-edit-link {
	color: #222;
	display: inline-block;
	margin-left: 1em;
	white-space: nowrap;
}

.search .page .entry-meta a.post-edit-link {
	margin-left: 0;
	white-space: nowrap;
}

.taxonomy-description {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
}

////////////////////
//style.cssの「site-main」に関連した部分のみ抜粋：その2
	/* Blog, archive, search */

	.sticky .icon-thumb-tack {
		height: 23px;
		left: -2.5em;
		top: 1.5em;
		width: 32px;
	}

	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive) #primary .entry-header,
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
		float: left;
		width: 36%;
	}

	.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
		float: right;
		width: 58%;
	}

	.blog .site-main > article,
	.archive .site-main > article,
	.search .site-main > article {
		padding-top: 4em;
		padding-bottom: 4em;
	}

	.navigation.pagination {
		clear: both;
		float: right;
		width: 58%;
	}

	.has-sidebar .navigation.pagination,
	.archive.page-one-column:not(.has-sidebar) .navigation.pagination {
		float: none;
		width: 100%;
	}

	.entry-footer {
		display: table;
		width: 100%;
	}

	.entry-footer .cat-tags-links {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
	}

	.entry-footer .edit-link {
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

	.entry-footer .edit-link a.post-edit-link {
		margin-top: 0;
		margin-left: 1em;
	}

firegrape

2020/10/19 13:16

phpではなくて、その部分のhtmlとcssを張ってもらえると回答できるかもしれません。

退会済みユーザー

2020/10/19 14:02

お目にとめて頂きありがとうございます。個別投稿のテーマファイル：single.php、個別投稿のテンプレートファイル：content.phpを追記しました。htmlを、とありますが、wordpressの構成上、phpの中にhtmlが記載されているのでこの2つを追記しましたがご要望のものにあっていますでしょうか。また、style.cssについては、ファイルが4000行以上あるなかでとりあえず「site-main」の記載があるかたまりを抜粋してみました。何卒宜しくお願い致します。