title: Nav menu bleeds out of container
body: <p>Morning again...,</p>
  
  <p>Sorry to bother everyone but I need more help... I haven't done any real coding in ages so here goes...</p>
  
  <p>I'm trying to make a horizontal navigation menu, here's my html</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul id="navmenu"&gt;
     &lt;li&gt;&lt;a href="" title="" class="selected"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="" title=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="" title=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="" title=""&gt;Link 4&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="" title=""&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  &lt;ul&gt;
  &lt;nav&gt; 
  </code></pre>
  
  <p>now I have the following CSS</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>I want the links to sit in the center of the Li and look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/WQfS2.png" alt="enter image description here"></p>
  
  <p>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...</p>
  
  <p><img src="https://i.stack.imgur.com/jJwsX.png" alt="enter image description here"></p>
  
  <p>does any one have any ideas?</p>