アイキャッチ画像の横に記事概要を設定したのに・・

WordPress初心者です。

現在、ソシムさんが出されている
WordPressレッスンブックHTML5&CSS3準拠を使って
ローカルサーバー環境にてブログを作成しています。

アイキャッチの画像を設定し、その横に記事の概要を表示することも出来ました。
しかしながらURLの画像のように
「続きを読む」のすぐ下に次の記事のタイトルが来てしまっています。。
https://www.dropbox.com/s/iaqktyg3s3g6ajw/%E7%84%A1%E9%A1%8C.png?dl=0

とりあえずアイキャッチ画像設定の際に弄った
index.phpとstyle.cssを載せておきます。

どなたか、お助け下さい。。

index.php

<?php else: ?>

    <div class="excerpt">
    <?php if( has_post_thumbnail() ): ?>
    <p><?php the_post_thumbnail( 'medium' ); ?></p>
    <?php endif; ?>

    <?php the_excerpt(); ?>
    <p class="more"><a href="<?php the_permalink(); ?>">
    続きを読む<i class="fa fa-chevron-right"></i></a></p>
    </div>

<?php endif; ?>

style.css

/* 記事の概要 */
.excerpt p   {font-size: 14px}
.excerpt .more a {padding: 5px 20px;
                  border: solid 1px #cccccc;
                  border-radius: 5px;
                  color: #000000;
                  text-decoration: none}
.excerpt .more a:hover
                 {background-color: #e6cc1c}
.excerpt .more i {margin-left: 10px;
                  color: #cccccc}

@media (min-width: 500px) {
.excerpt img	{float: left;
	margin-right: 20px;
	width: 40%}
}

@media (max-width: 499px) {
.excerpt img	{display: block;
	margin-left: auto;
	margin-right: auto}
}