如何将图像和h1标题对齐？

Question

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.

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

Add display: inline-block; to your h1 properties, as I've done here .

Answer 2

Try this:-

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

You have some CSS conflicts on h1 ...

This should work

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