WordPress アイキャッチ画像 レスポンシブ効かない

Question

WordPress勉強中です。WordPress 5.3を使用。

テキスト通りに進めていますが、アイキャッチ画像がオーバーフローしてしまいます。
修正箇所をお教えいただきたくお願い致します。

該当のソースコード

<?php get_header(); ?>

<main class="mycontainer">
	
	<div class="myposthead">
		<h1>最新情報</h1>
		<p>RECENT</p>
	</div>
	
	<?php if(have_posts()): while(have_posts()): the_post(); ?>
		 
		<article <?php post_class(); ?>>
			
			<?php if( has_post_thumbnail() ): ?>
			<figure>
			<?php the_post_thumbnail(); ?>
			</figure>
			<?php endif; ?>

			<h2><?php the_title(); ?></h2>
			
		</article>
		
		<?php endwhile; endif; ?>

</main>
		
		<?php get_footer(); ?>

該当のソースコード

<?php

function mytheme_setup() {
	
	// (C) のCSSを有効化

add_theme_support( 'wp-block-styles' );
	
	// 縦横比を維持したレスポンシブを有効化
	add_theme_support( 'responsive-embeds' );
	
	// (E) のCSSを有効化＆エディタに読み込み
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );
	
	// ページのタイトルを有効化
	add_theme_support( 'title-tag' );
	
	// link、style、scriptのHTML5対応を有効化
	add_theme_support( 'html5', array(
	'style',
	'script'
	) );
	
	// アイキャッチ画像を有効化
	add_theme_support( 'post-thumbnails' );
	
}
add_action( 'after_setup_theme', 'mytheme_setup' );

function mytheme_enqueue() {
	
	// Google Fontsを読み込み
	wp_enqueue_style(
	'myfonts',
	'https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;700&display=swap',
		array(),
		null
		);
	
	// Dashiconsを読み込み
	wp_enqueue_style(
	'dashicons'
	);
	
	// (D) テーマのCSSを読み込み
wp_enqueue_style(
'mytheme-style', get_stylesheet_uri(),
	array(),
	filemtime(get_theme_file_path('style.css'))
);

}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );

試したこと

コードの見直しを数回行いました。

Answer 1

テキスト通りにやってもできなかったので、別にclass名をつけて反映させました。