position de img interferindo no título

Olá a todos, tenho a seguinte estrutura html:

<header>
 <div id="head">
 <img id="logo" alt="Logomarca" src="../images/Logo.PNG"/>
 <img id="separadorReto" alt="Separador Reto" src="imagens/separadorReto.jpg"/>
 <h1 id="titulo">Título Principal</h1>
 <h2 id="subTitulo">Sub Título</h2>
 <span>Um slogan qualquer</span>
 </div>
 <div id="subHead">
 <h1 id="tituloPers">Título da Categoria Selecionada</h1>
 </div>
</header>

configurado pelas seguintes regras css:

#head{
	height:180px;
	background:#444;
}
#logo{
	width:150px;
	margin:15px 0 10px 12%;
	position:relative;
	float:left;
}
#separadorReto{
	height:150px;
	width:2px;
	margin:20px;
	float:left;
}
#titulo{
	position:relative;
	color:#fff;
	margin:0px;
	padding:20px 0 0 20px;
}

#subTitulo, span{

	position:relative;
	color:#ccc;
	margin:20px 0 0 0;
}
#subHead{
	height:60px;
	background:#202020;
}

#subHead h1{

	color:#FFD605;
	text-align:center;
	margin-top:0px;
	padding-top:10px;
	float:none;
}

Acontece que o Título do h1 dentro da div subHead não fica centralizado na tela, como, com a div head a 180px, parece que o posicionamento de algum item acima está influenciando no h1 da div subHead que diga-se de passagem é o único Elemento dentro da div subHead. Curioso é que quando a div Head está com width=200px, o h1 do subHead está centralizado corretamente mas reduzindo 20px ocorre essa quebra de alinhamento. Alguma luz dos ilustres pares?