Positioning elements with respect to header

Here’s the link to my work-in-progress project: Click here

I want the image containing div element to align itself right below the header according to the size of the viewport’s width.

My tries: I added padding/margin to the top of the divelement and it’s not responding to the media queries conditions. It just sticks with one padding/margin value.

Let me know what I can do in this situation.

Did you ever try out Relative and absolute positioning? CSS display values of table cell?
also try flexboxing it might be of help: https://caniuse.com/#feat=flexbox

Yea, I tried relative positioning. It didn’t work.