Background colour on menu div

Question

I've got a bit of a problem that has been driving me mad for the last 24 hours.  I have created a CSS rollover menu.  I have made the div that holds the menu the same width as my wrapper, 800 pixels.  I have created 4 rollover menu buttons, however they don't quite fill the whole of the 800 pixels.  I have given the div a grey background colour and I was hoping it would fill in the gap at the end.  However, it doesn't matter what I do, there is still white gap leftover.  Obviously the easiest solution I have found this to make each button 200 pixels wide, that means that because I have for now, they fit in perfectly.  Having said that, there is quite a wide gap between the writing on the buttons.  But that's not really the point, I can't understand why I'm not able to fill in the extra gap with colour
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu2-1.jpg[/IMG]
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu1.jpg[/IMG]

Answer 1

Thanks guys, that sorted the problem.  However, I can see now that if I do want to add a submenu, I may have a problem.  Is there any way around this problem where I can still have a submenu, but still have my div background visible?  I have included the code for my menu.  You'll have to forgive me, I've been using Joomla! for the last few years and it does make you rather lazy because we just basically use templates, rather than having to code everything :-)
#navMenu {
    margin:0;
    padding:0;
    background-color: #999;
    overflow: hidden;
#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    background-color:#999;
#navMenu li {
    padding:0;
    list-style:none;
    position:relative;
    float: left;
    margin: 0;
    background-color: #999;
#navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    font-weight: bold;