Can't make my design compatible with all devices

I have been creating a sub-box for my website and have been having trouble optimising it for all devices.
It is working okay on the desktop front end (see first pic), even though it lines up differently on the back end (see second pic).
The main problem is optimising it for tablet, mobile landscape and mobile (see 3rd, 4th and 5th pic).
I have set the max width the same on all devices however I can’t seem to get the start and end of the sub box to line up perfectly with the start and end of the footer below. I am also having trouble separating the black lines on tablet, mobile landscape and mobile, without pushing the button too far wide.
Hope this makes sense and that someone has some advice for this - would be happy to send more pictures or jump on a call.