La vista previa no queda en línea

He revisado todos los códigos y no encuentro el fallo, la capa contenido es mucho más ancha, la cabecera y el pie tienen distinta anchura. Dejo los códigos por si alguien me puede hechar una mano.

Estilo-general.css
* {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}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
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 0px 10px; text-indent: 15px}
#menu {background-color: yellow; width: 150px; float: left; text-align: left; margin: 3px 10px 3px 3px; background-image: url (objetos/menu-parte-inferior-1.gif); background-position: bottom; padding-bottom: 5px}
#menu li {list-style: none; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration: none; font-size: 12px; background-image: url (objetos/menu-curva-superior-1.gif); padding-top: 12px}
#pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height: 65px}
#pieuno {background-color: brown; float: left; width: 150px}
#piedos {background-color: green; float: left; width: 498px}
#pietres {background-color: red ; float: left; width: 150px}
#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 {}

plantilla.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4</div>
    </div>
    <div id="contenido">
    <div id="menu">
    <ul><h1>Título de la Sección 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4</div>
    <h1>Esta será la zona principal de la web</h1>
    </div>
    <div id="pie">
    <div id="pieuno">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>
  • te sobra un cierre de div

    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4</div>
    </div>

    aqui otro
    <div id="menu">
    <ul><h1>Título de la Sección 1</h1><li

    debe ser asi

    <div id="menu">
    <h1>Título de la Sección 1</h1>
    <ul><li

    ponle mas texto a contenido
    debe ser mayor que el menu

    saludos