responsive e-learning landing page

it was hard to get the mobile hero image display exactly like the design. when i set the image's max width to be 100%, it was smaller than the design, so i tried setting a negative left and right margin to stretch the image but only the negative left margin worked and pulled the image left, the right negative margin did not work when i checked the dev tool. in the end i had to set the max width to be above 100% to make it look like the design. could anyone let me know why the negative right margin wouldn't work but the left one would?

any feedback is appreciated thank you.