How to position this image next to the heading properly without affecting the design

So I've been pulling my hair out trying to figure this out, I'm coding from PSD but I'm having trouble positioning the image (the lightbulb).

I've tried positioning absolute and then adjusting the 'right' to position it next to the heading, but for some reason this has added some white space in between the section above and the section its on. Also, I want some padding above the image to make it neater but this just pushes the images downwards instead of adding padding above it.

Another issue with the way I've done it is when I change the screen size, the image moves out of place completely.

My CSS:

.lightbulb {
    position: absolute;
    right: 63%;
    margin-top: 20px;
}

My HTML:

<section class="what">
    <h2>What is a <span class="red-underline">style tune-up?</span></h2>
    <p>Just like a car needs a tune-up every 100,000 miles or so, your style may also need tune-up every 100,000 tears, smiles, frustrations, or laughs. Your life can sometimes takeover and your sense of style gets worn down, less efficient, and less stylish. A style tune-up allows you to give yourself a little refresher or a little boost VERY QUICKLY since all the work is done for you.</p>
    <p>It’s not just shopping, it’s not just color analysis, it a complete style experience customized to you, your lifestyle, and your style goals.</p>
</section>
<section class="how">
    <img class="lightbulb" src="/img/lightbulb.png" /><h2>Here's <span class="red-underline">how it works:</span></h2>
    <p>Send us your selfies – Take a picture of yourself every day for a week and upload your photos so I can get a sense of your current wardrobe and lifestyle.</p>
    <p>Phone consultation – Review your current style and photos. Answer questions about your current wardrobe, challenges you are having, a lifestyle assessment, and all your basic style stats like color, body shape, etc…</p>

Any help would be greatly appreciated.

Solution

You can use a :before pseudo-element on the h tag like this: https://jsfiddle.net/qh9u9vba/1/

.how h2:before {
  content:"";
  position:absolute;
  height:50px;
  width:50px;
  margin-left:-60px;
  margin-top:-10px;
  background-image:url('http://placehold.it/50x50');
}

And remove the img from your HTML. This will keep your h tag right in the middle and put the image wherever the text goes. Fix the margins to suit your image size. Good luck.

Note: I added text-align:center; just for demonstrative purposes, otherwise the image would be out of the viewport.