header image position on mobile version

Hi,

The header image on my site looks fine on desktop view, but cuts off the right part on mobile view.

The reason for this is normally, the image is too far left so I’ve added some left padding to move it to a better position. This breaks the design on moble view however.

I tired entering a media query to remove the padding on the mobile view as follows:

@media only screen and (max-device-width: 480px) {
.header-image {
padding: none;
}
}

…but this didn’t respond in any way. If anyone can help I’d massivley appreciate it!

The theme is a child them of Superhero.