Hola
Lorelopez
No me acabo de enterar muy bien de lo estás buscando hacer (este es el problema de no conocer la totalidad del proyecto y sus funcionalidades), pero te dejo una hoja de estilo, con cambios, para que pruebes tu diseño y nos comentes algo:
Código HTML:
* {margin: 0; padding: 0;}
html, body {
width: 100%;
height: 100%;
text-align: center;
}
body {
background-color:#800000;
font-family: Georgia, "Times New Roman", sans-serif;
color: black;
font-weight: normal;
text-align: justify;
font-style: normal;
font-size: 16px;}
#contenedor {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
/*margin: 2em auto;*/
/*vertical-align: middle;*/
background-color: #FFCCCC;
overflow:auto
}
#main {
position:absolute;
left:47%;
top:33%;
width:458px;
height:183px;
z-index:1;
font-family: Georgia, "Times New Roman", sans-serif;
font-size: 24px;
font-weight: bold;
color: #990000;
text-align: center;
background-color:aqua; /*para testar*/
}
A mi modo de ver, el problema está en combinar medidas en porcentaje (contenedor) con medidas de posicionamiento en px (main).
Naturalmente, esto es una simple aproximación a lo que yo entiendo que es tu problema. Ajusta las medidas y haz una prueba.
Espero comentarios.
Bye