I am trying to put more effort into designing my projects, currently my Twitch Streamers App, but am having trouble. I wanted to get the Twitch logo/image next to the text “streamers” with a purple background like this:
I used absolute position to get an image and text positioned exactly how I wanted it with a purple rectangle behind it. I am using a
with a purple background to get the purple rectangle that spans the whole screen and then using absolute position to put the image and text over it. However, I noticed that it looks jumbled on certain screens because it is not responsive.
This is how I am trying to make it look on all screen sizes, but currently can only get it to work like this for a specific screen size based on the margins I set for the image and text :
If I do not use absolute position,especially for the text, the text floats in the middle like this: 
My Codepen: https://codepen.io/mso122591/pen/jxNoBV
Is it not possible to use absolute position this way and still make the result responsive?
Thanks!
