填写框的CSS背景文本

Question

I'm trying to make a copy of a website as my first CSS/HTML exercise. I can't figure out how to make the menu list so it has its background filling the box (extending until the right border).

Picture of what I have now (right side of the picture, red lines show where the background should go) and what I want to get (left side).

My code .

I've tried so far to achieve it eg with 'width' and 'display' parameters, but eg display: block; remove the lines between text. I'm out of ideas.

Answer 1

        display: block;
        width: 100%;
        margin-bottom: 2px;

to the #menu

Answer 2

spans are inline elements so they cannot have width or height . You should put a background-color to your li elements instead of your spans .

.menu{
   background-color: grey; //Change it to your custom colour.
}

Also, you cannot have more than one element with the same ID . You have to put them as a class.

Updated JSFiddle .