Como posso alinhar a imagem e o cabeçalho h1 ajadecently?
Tenho problemas em tentar alinhar a imagem e a tag h1 em uma linha. Tentei exibir: inline e inline-block eles não funcionaram e só fizeram o container dos dois. Eu adicionei a largura a 100% na seção e ainda nada. O Float também não funciona e, se o fizer, estraga o alinhamento da página. O que estou fazendo de errado? Às vezes é difícil entender por que não funciona conforme o esperado e precisa de ajuda.
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
CSS
section{
display:inline-block;
width:100%;
}
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}