displaying posts on a webpage

Hi All,

The website i’m working on is located here

You will notice that I have pulled some recent posts into the footer of the website using the following code.

<?php require('./blog/wp-blog-header.php');?>
    <ul>
	<?php query_posts('showposts=3'); ?>
	<?php while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li><br />
	<?php endwhile;?>
    </ul>

now my problem is that you see that the posts are so close together but its ignoring my css rules to space them apart here is the code for that

#bottom {
	margin:0 auto;
	clear:both;
	width:920px;
	height:160px;
	background:#2d2d2d;
	color:#fff;
	padding:20px;
}

#bottom-twitter{
	float:left;
	width:300px;
}
#bottom-facebook{
	float:left;
	width:290px;
	padding-right:10px;
}
#bottom-youtube{
	float:left;
	width:300px;
}

#bottom-youtube ul {
border-top:1px solid #E9E9E9;
margin:12px 0;
}
#bottom-youtube li {
border-bottom:1px solid #E9E9E9;
list-style:none outside none;
padding:10px 0;
}

#bottom-youtube a:link, #bottom-youtube a:visited {
	color: #ffffff;
	font-size: 1.2em;
	text-decoration:none;
}

how can I make my posts down there be even more spaced apart.

Thanks