Hi all - I am new to the forum and web development so any help would be appreciated.

I am trying to create a vertical navigation bar using a div and li requirements. I can't figure out why the list items are off center from the div. The example is at http://urbanfarmhouseonline.com/testmisc

and I will post the markup below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">

#services_nav {
position: relative;
width: 125px;
background: #EDC25E;
margin-left: 15px;
border-radius: 15px;
padding: 5px;

}

#services_nav ul {
display: inline-block;
list-style-type: none;
}

#services_nav ul li a{
display: block;
color: black;
background: white;
width: 120px;
text-align:center;
margin: 5px;
padding: 10px;
border: 2px solid gray;
border-radius: 15px;
border-color: #888888;
text-decoration: none;
}

#services_nav ul li a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>
<body>
<h1>New Web Project Page</h1>

<div id="services_nav">
<ul>
<li><a href="services_ed">Edible Landscaping</a></li>
<li><a href="services_cc">Cooking Classes</a></li>
<li><a href="services_we">Workshops and Events</a></li>
<li><a href="services_ec">Educational Consulting</a></li>
</ul>
</div>
</body>
</html>