I am doing a frontend mentor challenge and I cant get the picture to look how it looks in the picture. I tried making the container position relative and the position absolute but it makes the page wider even if i put overflow: hidden. I am doing mobile first so i'm trying to get it to go from mobile to tablet size with the media query.
I have the figma file on github if you want to see that https://github.com/JosephCass/e-learning
code https://codepen.io/Joseph9384/pen/gOvVdYv
CodePudding user response：
In your media query (min-width: 768px):
Use transform: scale(2); and left: 200px; on your header-image and adjust the value of left and scale property according to your need. Also you can remove overflow: hidden; from header-image as well. Don't use overflow: hidden; on the parent div since it will hide especially the bottom left stat thing which you don't want that to happen.