How can I align the image and the h1 header ajadecently?

How can I align the image and the h1 header ajadecently?

I have problems with trying to align the image and the h1 tag together on
one line. I tried display: inline and inline-block they didn't work and
only made the container of the two. I added the width to 100% on the
section and still nothing. Float doesn't work either and if it did, it
screws up the alignment of the page. What am I doing wrong? Sometimes it's
hard to understand why it doesn't work as intended and need some help.
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
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;
}