AYUDA con el menú lateral

Hola.
Voy por el penúltimo punto de la lección 3 de la parte de ejemplos con Divs, y el menú lateral se ve muy cerca al borde izquierdo, además cuando coloco el ratón encima de algún enlace se sombrea toda la capa sin dejar ningún margen ni por la izquierda ni por la derecha. ¿Cómo puedo hacer para separar las letras del menú del borde y para que haya margen en el sombreado?

He revisado el código y está igual que el que indica Jorgens y no se ve igual que como indica Jorgens que se debería de ver.

Saludos.
Bueno dos cosas cuando hagas una consulta que tenga que ver con el código siempre es bueno postear el código para refrescarnos a los demás la memoria.

Segunda cosa generalmente si cuando una capa no se nos ve bien por temas de margen suele ser por que no hemos puesto bien los parametros alguna de estas dos propiedades de CSS: margin /padding
He probado a modificar tanto el padding como margin y no veo que haya modificación alguna.
Posteo el código html y .css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80" alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
<div id="navegacion">
<ul><li><a href="#">Seccion 1</a></li><li><a href="#">Seccion 2</a></li><li><a href="#">Seccion 3</a></li><li><a href="#">Seccion 4</a></li></ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Titulo de Seccion 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>

</div>
<h1> Ésta sera la zona principal de la red</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2> En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>

</div>
<div id="pie">Este es el pié de página</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>




*{text-indent:0px; margin:0px; padding:0px; border:0px; }
p {text-align:justify;}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;} <!esta línea se pone antes de menu h1 porque si se pusiera despues, da igual lo que se pusiera en menu h1, la que valdria es la que esta la ultima, por lo tanto menu h1 no serviria de nada>
h2 {font.size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}
body {text-align:center;}
#global {width:800px; margin:4px auto}

#curva-superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden; }
#cabecera {background-color:white; border-left:black 1px solid; border-right:black 1px solid; height:85px;}
#logotipo { width:280; float:left;}
#publicidad { width:518; float:right; margin-top:25px; }
#navegacion {background-color:grey; border:black 1px solid; height:20px;}
#navegacion li {float:left; list-style:none; margin: 0px 20px 0px 20px;}
#navegacion ul {margin-left:180px;}
#contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#menu { width:150px; float:left; text-align:left; margin: 3px 10px 3px 3px; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px; }<!este penúltimo comando es para que la imagen de fondo se alinee por la parte de abajo a la capa y asi poder ver la curva>
#menu li {list-style:none; margin:4px 8px 4px 6px;}
#menu h1 {text-decoration:none; font-size:12px; padding-top:12px; background-image: url(objetos/menu-parte-superior.gif); } <!no se puede poner una anchura porque no es una capa sino una imagen de fondo>
#pie {background-color:white; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid; }
#curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden }
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}

Esta es la dirección de la plantilla vean como se ve el sombreado al colocar el raton sobre algun enlace del menu lateral y además el enlace se ve muy pegado a la izquierda. El código está exactamente igual que el que indica Jorgens. Haber si me pueden ayudar estoy atrancado ahí.
http://www.webpruebaprimera.comocreartuweb.es/plantilla.html
hola
los comentarios en el css deben ir asi

/* Esto es un comentario en css */
asi como los tienes marca error, asi que cambia todos los comentarios

y en esta linea

#contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;}}
te sobra un cierre de corchete al final

saludos
Muchas gracias. Problema resuelto.

Una ultima pregunta. Los comentarios en el css van entre /* */, comentas, pero en el html ¿van así tambien?

Saludos.
no, en el html van diferente
van asi

<!-- esto es un comentario en html -->