Duda del ancho de pantalla en mi portada.

Mirad, aquí os dejo el ejemplo de mi web.

http://musicfresh.comocreartuweb.es/


Como podeis ver, la portada no se ve bien, mientras que las demas el ancho y el pie y eso está bien.

También os dejo el código del index (portada) el estilo-general.css y por ejemplo el historia.ht ml

HOJA 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: 40px }
#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 {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 }
#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) }
#pie {border-left:black 1px solid; border-right:black 1px solid;
      border-top:black 1px solid; height:65px;}
			#pie li {list-style:none; font-size:11px;} 
#pieuno {float:left; width:150px; font-size:10px;}
#piedos {float:left; width:498px; background-color:silver;}
#pietres {float:left; width:150px; font-size:10px;} 
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:blue ; text-decoration:underline ; background-color: silver}
a:active {}
#pie a {color: black; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}  


INDEX PORTADA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Que te calles</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> 
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<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">Bienvenido a Music Fresh Homie!</div>
	
	</div>
		
<div id="navegacion">
  <ul>
    <li><a href="index.html">Portada</a></li>
    <li><a href="historia.html">Historia</a></li>
    <li><a href="discografia.html">Discografía</a></li>
    <li><a href="conciertos.html">Conciertos</a></li>
    <li><a href="descargas.html">Descargas</a></li>
    <li><a href="foro.html">Foro</a></li>
    <li><a href="souvenirs.html">Souvenirs</a></li>
  </ul>
</div> 


</ul></div>

<!-- FIN DE CODIGO DE CABECERA -->

<div id="contenido">

<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->


		 <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
	
		 <h1>Bienvenido a Music Fresh Homie!!</h1>
    <p>Aqui encontraras la mejor web de música</p>
		<p>Del mundo HOMIEEEEEEEE!!!
		LITTLE BITCHEEEEEEEEEES

		
		
</div>
 

		
      <div id="pie">
<div id="pieuno">
  <ul>
    <li><a href="#">Foro Ejemplo</a></li>
    <li><a href="#">Contactos</a></li>
    <li><a href="#">Nos Enlazan</a></li>
  </ul>
</div> 

<div id="piedos">pie dos</div>
<div id="pietres">
  <ul>
    <li><a href="#">Directorio</a></li>  
		  <li><a href="#">Mapa Web</a></li>
		    <li><a href="#">Topsite</a></li>
  </ul>
</div> 
</div> 

<div id="curva-inferior"></div>


</body>
</html>

HISTORIA 

<!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>
			
			<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
			
      <div id="cabecera">
    
   <div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270px"
      height="80px" 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="index.html">Portada</a></li>
    <li><a href="historia.html">Historia</a></li>
    <li><a href="discografia.html">Discografía</a></li>
    <li><a href="conciertos.html">Conciertos</a></li>
    <li><a href="descargas.html">Descargas</a></li>
    <li><a href="foro.html">Foro</a></li>
    <li><a href="souvenirs.html">Souvenirs</a></li>
  </ul>
  </div>
	
	<!-- FIN  CODIGO DE CABECERA - NO TOCAR -->
	
	
  <div id="contenido">
	
	<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
	
   <div id="menu">
  <h1>Historia</h1>
  <ul><li><a href="miller.html">Mac Miller</a></li><li><a href="wiz.html">Wiz Khalifa</a></li>
	
</div> 
			
			<!-- FIN  CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
  <h1>Esta será la zona principal de la web</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>
<p>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>
			
			<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
			
      <div id="pie">
<div id="pieuno">
  <ul>
    <li><a href="#">Foro Ejemplo</a></li>
    <li><a href="#">Contactos</a></li>
    <li><a href="#">Nos Enlazan</a></li>
  </ul>
</div> 

<div id="piedos">pie dos</div>
<div id="pietres">
  <ul>
    <li><a href="#">Directorio</a></li>  
		  <li><a href="#">Mapa Web</a></li>
		    <li><a href="#">Topsite</a></li>
  </ul>
</div> 
</div> 
<!-- FIN  CODIGO PIE DE PAGINA - NO TOCAR -->
      <div id="curva-inferior"></div>
    </div>
  </body>
</html>


PD: Se que vereis algunos errores mas, pero ese el unico que me importa xd, los demas ya los se resolver yo xd
Lo unico es eso, que no se porque en la portada me sale tandeformada...
Saludos