Page lists in header

hello,

I am working on this nonprofit organization site: pawalksandbikes.org

As you can see there is a list of pages in the header. This is being called by wp_list_pages. The problem is that when the page names are returned, names with multiple words have each word displayed on a new line. It is doing it right now, but you cannot see the lower lines because other page elements are covering it up.

Here is the php in the header file:

<div class="menu">
            	<ul class="main-menu">
					<li><a href="<?php echo get_option('home'); ?>/" title="Home">Home</a></li>
                	<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
                </ul>
            </div>

And here is the section from the style sheet:

.menu{
width:767px;float:left;margin:0px 0 0 0;
}
ul.main-menu{
margin:0 0 0 80px;
}
ul.main-menu li{
float:left;padding:0 80px 0 10px; color:#9fd3ed; height:33px;vertical-align:middle;line-height:33px;
}
ul.main-menu li a{
color:#9fd3ed;text-decoration:none;
}
ul.main-menu li a:hover{
color:#fff;
}