Hi
i was struggling with positioning the image next to the h1 heading. First i tried the float property. But i couldn’t adjust the top-margin.
Then somehow i got what i wanted by using the Display and Position property. now i can adjust the top-margin.
Is this codes ok or is there a better way to do this?
Note: the alignment of the image and text is off because of the size of the result screen in jsfiddle. i have to add extra code later to fix the size when the screen changes in size
If you just want them side by side, I would recommend putting a display: flex and align-items: center on the #header. I’ve commented out some potentially unnecessary code (depending on how you want the animation) and made a new fiddle for you here.
Flexbox is the generally recommended practice when it comes to aligning content, and CSS Grid is great for table-style content. Floats can come with the headache of clearing content later and positioning makes the element committed to where it is on the page. You can learn more about flexbox here and css grid here, it will make your code easier to go back to in the future 
You should definitely use flexbox for this.
As an aside, I wouldn’t recommend animating/transitioning font size and margin. The performance will be better if you stick to transform (translate (y/x), and scale in your case). Here is an old article with some info, I believe this all still applies.
Oh and here is the link to the css-tricks grid article I think singhshemona meant to post.
Thanks a mill for the advice and help. 
I will check the links on flexbox and css grid.
These will help me alot in my journey to the vast world of coding. 
hi!
Waow! Thanks for the tip!
I will check out the article. It will surely help me a lot in this journey in webdesigning.
And thanks for correcting the link of singhshemona.