PROBLEMA EN LECCION 3 AYDA URGENTE

HOLA AMIGO TENGO UN PROBLEMA EN LA CAPA DE NAVEGACIO NO ME RECONO LOS ESTILOS Y NO LOGRO DAR CON EL PROBLEMA NECESITO AYUDA ADJUNTO IMAGEN DE COMO SE VE AGRADECERIA PRONTA RESPUESTA
[contenido no disponible]

AQUI MI ESTILOS
*{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}
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: 280px; float:left}
#publicidad {width: 518px; float:right; margin-top:25px; font-size:16px}
#navegacion {background-color: gray;
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 {margin:5px 10px 5px 10px;
text-indent:15px}
#menu {background-color:yellow;
width:150px;
float:left;
text-align:left;
margin:3px 10px 3px 3px}
#menu li {list-style:none;
margin:4px 0px 4px 6px}
#menu h1 {}
#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 {}



AQUI MI PLANTILLA
<!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">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a Mi Web
</div>
<div id="navegacion">
<ul>
<il>Seccion 1
<il>Seccion 2
<il>Seccion 3
<il>Seccion 4

</div>
<div id="contenido">
<div id="menu">
<h1>Titulo de la Seccion</h1>
<ul>
<il>Enlace 1
<il>Enlace 2
<il>Enlace 3

</div>
<h1>Esta será la zona principal de la web</h1>


Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el
tamaño de la letra de toda la web, podemos varias los aspectos
de los enlaces, los fondos de ciertos elementos, etc, etc sin
más que poner la propiedad correspondiente.
<h2>Pero para eso, todas las partes del contenido de la página web deben "ser algo".</h2>


Si son enlaces modificaremos la etiqueta "a", si son párrafos la
etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar
las propiedades del texto de la parte principal de nuestra
plantilla? Aquella en la que pone "Esta será la zona principal de la web"?


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

</body>
</html>
MUCHAS GRACIAS POR TODO
en la oja de estilos ponle al #navegacion
le pones (float: left)
y luego en el html de tu pagina donde pone navegacion tienes que ponerlo todo en la misma linia
a i porcierto cuando pongas eso en la #navegacion de la oja de estilos alfinal cierralo con el } por que lo dejastes abierto