How to make menu's width equal to the width of all list items

Question

I have this website JSFiddle and I currently have my menu set to a width in pixels. The problem with this is that on certain screen resolutions, the width of the menu bar differs.

I am wondering how I can get my menu bar to wrap the list items. I have tried width:auto but I cannot get it to work. If you have a solution, can you provide it in my JSFiddle?

Answer 1

Here you go: JSFiddle

In order to have the "shrinkwrap" effect on the container, the easiest way is to set it's display to inline-block.

ul#menu {
    display: inline-block !important;
}

Next in line, to have it centered, add text-align:center; to the container.

#menu-wrap {
    text-align: center;
}

Answer 2

I'm not sure if I'm missing something but I was able to get the menu items to wrap using width:100%. Here is the modified JSFiddle.

Here's the relevant CSS:

#menu {
        width: 100%;
        margin: 30px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: -moz-linear-gradient(#444, #111); 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#444, #111);  
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }