Nav menu bleeds out of container

Mark Sandman

Morning again…,

Sorry to bother everyone but I need more help… I haven’t done any real coding in ages so here goes…

I’m trying to make a horizontal navigation menu, here’s my html

<nav>
<ul id="navmenu">
   <li><a href="" title="" class="selected">Link 1</a></li>
   <li><a href="" title="">Link 2</a></li>
   <li><a href="" title="">Link 3</a></li>
   <li><a href="" title="">Link 4</a></li>
   <li><a href="" title="">Link 5</a></li>
<ul>
<nav> 

now I have the following CSS

/* menu */
ul#navmenu{ 
    border-top:1px solid #FFF;
    background:#e60000;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left:30px;
}

ul#navmenu li{
    display:inline;

}

ul#navmenu li a{
    color:#fff;
    text-decoration:none;
    /*
    padding-left:15px;
    padding-right:15px;
    */
    padding:15px 15px 15px 15px;
}

ul#navmenu li a.selected{
    color:#e60000;
    text-decoration:none;
    /*
    padding-left:15px;
    padding-right:15px;
    */
    padding:15px 15px 15px 15px;
    background:#fff;
}

I want the links to sit in the center of the Li and look something like this:

However the containing UL doesn’t seem to contain the LIs, they bleed out of the container. I’ve played around with overflow and line heights but nothing seems to work… here’s a worst case scenario…

does any one have any ideas?