background-color somente para o content

Olá, sou novo aqui no forum e também ao desenvolvimento web.

Estou com pequenas dúvidas, não achei nada aparente que se encaixasse nas minhas dúvidas.

Se houver algum tópico que as sane peço por favor para me redirecionar para ele.

Estou com o seguinte problema:

Para usar transparência nas bordas uso rgba, porém, quando uso um bg-color, altera-se a cor da borda (devido ao fator alpha), então uso um artifício para sanar este problema. Uso uma div preenchendo todo o conteúdo, assim deixo a borda livre.

O que acontece é que quando adiciono algum conteúdo a div interna ela se desloca.

/applications/core/interface/imageproxy/imageproxy.php?img=https://lh5.googleusercontent.com/_f15qRA1Fuco/TYYho6nnmYI/AAAAAAAAABg/sk2MpTOfcfI/s912/Div%2520dentro%2520de%2520div.png&key=88875491d148035ca43db7983fdef8d93591009f30388f6e5aa64a3e2ba740d3" alt="Div%20dentro%20de%20div.png" />

o código html que estou usando é este:

<div id="Header" >
<div class="Content">
<h1> Header content.</h1>
</div>
</div>

e o css:

#Header{
position: relative;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
width: 1000px;
height: 150px;
z-index: 1;
border-width: 24px;
border-color: rgba(199,199,199,0.7);
border-style: solid;
border-radius: 16px;
-moz-border-radius: 16px;
}

#Header h1{

text-align: center;
}

.Content {
margin: 0 0 0 0;
padding: 0 0 0 0;
outline: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(216,248,255,0.9);
}

 

obs: já tentei usar margin: 0; padding: 0;

Alguem sabe como faço para o conteúdo não se deslocar deixando aquele espaço branco?

Ou como atribuir bg-color somente para o content??

Uma dúvida fora do assunto é: Alguem sabe como tirar aquele quadrado mais escuro no centro da borda? obs: ele só aparece no chrome.

Se de algum modo for uma inconviniência perguntar sobre estes assuntos peço desculpas previamente.