Jak mogę wyrównać obrazek i nagłówek h1?

Question

Mam problemy z próbą wyrównania obrazu i znacznika h1 w jednej linii. Próbowałem wyświetlać: wbudowany i wbudowany blok nie działały i tworzyły tylko kontener z dwóch. Dodałem szerokość do 100% na sekcji i nadal nic. Float też nie działa, a jeśli tak, to wkręca wyrównanie strony. Co ja robię źle? Czasami trudno jest zrozumieć, dlaczego nie działa zgodnie z przeznaczeniem i potrzebuje pomocy.

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; 
} 

Answer 1

Dodaj display: inline-block; do swoich właściwości h1, jak robiłem here.

Answer 2

Spróbuj tego: -

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; 
display: inline-block; 
} 

Answer 3

Masz jakieś konflikty CSS na h1 ...

To powinno działać

section { 
    display: block; 
} 
h1 { 
    position:relative; /*position wherever desired on the page*/ 
    display: inline-block; 
    font-weight:bold; 
    font-size:40px; 
    color:#FFFFFF; 
    background-color:#FFB405; 
} 
section img { 
    display: inline-block; 
}