How to align text and image on same line so they're right next to each other?

I’m working on my portfolio ( and I’m trying to align some text and image onto the same line so they’re right next to each other in the center of the page with no space in between.

Right now it looks like this:

             "I'm a Doctor"                      (img)

And I want it to look like this:

                           "I'm a Doctor" (img)

How about using flexbox? You’ll have to contain the heading and the image in one <div>, then make that <div> a flex container. Flexbox also has some handy properties to further tweak how the items behave, say if you want them in the center of the container.

On a side note, you’ll want to change your image’s source. Images from imgur often can’t be used in codepen.