Horizontal and Vertical spacing for a Menu

Hi All,

I have a menu made of an Unordered List that has 5 items equally spaced across my page.

|__Logo__|___1___|___2___|___3___|___4___|

This is done by specifying that #menu li {width:20%}.

Problem 1
However, I would like one of the items to have a different spacing. More specifically I would like the logo to have a smaller spacing, something like:

|Logo|___1___|___2___|___3___|___4___|

Since I still want the other items to have the same spacing, how do I only alter the spacing of the logo in a liquid design? I suppose I could create a class but I haven’t done that before.

Problem 2
Furthermore, I would like to change the vertically alignment of the logo as well. I would like it to be centered vertically in the menu.

This is the current CSS for my ul and li:

[CODE]18 #menu ul {
19 margin: 0px;
20 // padding: 0px 0px 0px 21px;
21 list-style-type: none;
22 }
23 #menu li{
24 // margin: 0px;
25 // padding: 0px;
26 width: 20%;
27 float: left;
28 }
29 #menu li a:link, #menu li a:active, #menu li a:visited {
30 display: block;
31 line-height: 90px;
32 font-weight: bold;
33 color: #1a1a1a;
34 text-decoration: none;
35 font-family: Arial, Helvetica, sans-serif;
36 text-align: center;
37 font-size: 110%;
38 }
39 #menu li a:focus, #menu li a:hover{
40 text-decoration : none;
41 // -moz-outline:0;
42 color: #675ace;
[/CODE]

Thanks,
ScKaSx

Also in #CSS _↴