記事一覧をプラグインなし　CSSに上手に伝わっていないと思います

お世話になります。

テストサイトを使用して記事一覧をプラグイン無しで表示しようと挑戦しました。

横に記事を5つ表示させたいのですが上手にＣＳＳにうまく伝わらず下記のページのように
なっています。

テストサイト

ほぼ一日がかり試行錯誤していますが上手にいきません。

single.phpの記述はこの様になっています。

<!–関連記事–>
<h2>関連記事</h2>
<ul id=”relation” style=”list-style:none;”>
<?php
$tags = wp_get_post_tags( $post->ID, ‘fields=ids’ ); //現在のタグIDを配列で取得
global $post;
$args = array(
‘posts_per_page’ => 5,
‘tag__in’ => $tags,
‘post__not_in’ => array($post->ID),
‘orderby’ => ‘rand’
);
$myposts = get_posts( $args );
if ( !$myposts ) {
echo “

• 記事がありません。

“;
} else {
foreach( $myposts as $post ) {
setup_postdata($post);
if( has_post_thumbnail() ) {
$rl_img = get_the_post_thumbnail( $post->ID, array(100,100), array(‘alt’=>get_the_title()) );
} else {
$rl_img = ‘<img src=”xxx.png” width=”xx” height=”xx” />’;
}
?>

• “><?php echo $rl_img; ?><?php the_title(); ?>

<?php
}
}
wp_reset_postdata();
?>

design.cssの記述はこの様になっています。

/*————————————————————
　関連記事
————————————————————-*/
ul#relation li{
width:100px;
margin:0 6px 10px 6px;
float:left;
}
ul#relation li img{
border-top: 1px #ddd solid;
border-left: 1px #ddd solid;
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
padding: 3px;
background: #fff;
margin-top:0;
}
ul#relation li img:hover{
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}
ul#relation li h4{
margin-top: 3px;
font-weight: normal;
font-size: 85%;
line-height: 15px;
}

問題はＣＳＳに上手に伝わっていないと思います。

まだＨＴＭＬやＣＳＳに関してレベルが低いので
直していい箇所がわからず困っています。

お忙しい中ですがよろしくお願いします。