Problem of alignment of navigation bar

[rhodarose]

I created a navigation bar on my webpage this is the code:




#nav_vertical {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 7px;
top: 169px;
}
#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin:0 0 0 0;
padding:0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}

<div id="nav_vertical">
<ul>
<li id="current"><a href="wimbledon.php" title="WIMBLEDON"><span>WIMBLEDON</span></a></li>
<li><a href="" title="RONALD GARROS"><span>RONALD GARROS</span></a></li>
</ul>
</div>


the output of this code is

WIMBLEDON
RONALD
GARROS


I want that the output is like this:

WIMBLEDON
RONALD GARROS

[Beverleyh]

Try using a non breaking space &nbsp; between RONALD and GARROS in the span tags.