Prueba con este otro CSS y modifica las distancias a tu gusto.
Código CSS:
Ver originalhtml { height: 100%; }
body {
background-color: #91aefe;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0%;
}
/* Cabecera */
#head {
margin:0;
margin-top:0;
background-image: url("../files/head.jpg");
background-position: left;
background-repeat: no-repeat;
height: 140px;
width: 100%;
}
#head p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: oblique;
padding-top: 40px;
padding-left: 400px;
margin-top: 0%;
position:relative;
}
#menu {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
background-image: url("../files/menu.jpg");
background-repeat: no-repeat;
height: 40px;
}
#menu ul, li {
list-style-type: none;
}
#menu ul {
width:980px;
margin: 0 auto;
}
#menu li {
display: inline;
position:relative;
}
#menu a {
color: #fff;
text-decoration: none;
text-align: center;
padding: 7px;
display: block;
outline:none;
width:135px;
float:left;
}
#menu a:hover {
/* background: #FFFFFF; fondo cuadro*/
color:#000000;
}
/*Contenido*/
#contenido {
border: 3px solid #FF0000;
width: 65%;
height: 65%;
margin:40px auto 20px;
position: relative;
}
#titulo{
width: 100%;
height: auto;
}
#titulo h1 {
color: #660000;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#content{
width: 100%;
height: auto;
padding-top: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*Pie*/
#pie {
width: 100%;
background-image: url("../files/pie.jpg");
background-repeat: no-repeat;
height: 80px;
margin-top: 0%;
clear: both;
padding: 1px;
position: relative;
padding-bottom: 0%
}
#pie p {
text-align: center;
color: #fff;
font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
margin-bottom: 0%;
position: relative;
}