How to customise YARPP template

[wittywit]

I wanted to customize my swifts YARPP template to display the thumbnails a little bigger and i was able to it by creating a new template file as seen from a blog and adding custom css to the theme as directed but the posts are shown a little misplaced from the related post box of the theme can any on suggest a fix or a nother way to get bigger thumbnails in related post.
Here's the code :

<?php ?>
<p class="related-posts">Related Posts:</p>
<?php if ($related_query->have_posts()):?>
<ol class="related-posts">
<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<?php
$default = ''; //default image url
$content = $post->post_content;
$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
if ( $output > 0 )
$thumb = $matches[1][0];
else
$thumb = $default;
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ($thumb != "") : ?>
<img src="<?php echo get_bloginfo('template_directory');?>/timthumb.php?src=<?php echo $thumb; ?>&amp;w=120&amp;h=120" alt="" />
<?php else : ?>
<img src="<?php echo get_bloginfo('template_directory');?>/timthumb.php?src=<?php echo $default; ?>&amp;w=120&amp;h=120" alt="" />
<?php endif; ?>
<?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ol>
<?php else: ?>
<p>No related posts found</p>
<?php endif; ?>

Custom css used :

ol.related-posts {clear:both; text-align:center; margin:10px 0px 15px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px; padding-right:12px; font-weight:bold;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
ol.related-posts li{font-size:12px;}
p.related-posts{margin-top:20px; font-size:15px; font-weight:bold; color:#141414;}

All of this was seen from a blog about custom YARPP template

Here is what the it looks like now