Header & footer width issue on smartphone

Hi there, I just put this site up yesterday and have noticed that on my smartphone both the header and the footer width & backgrounds are only about 40% of the width of the screen, while the content is perfect. I’ve honestly tried to troubleshoot this, but I can’t find any css that would cause this to happen. I’m self-taught (with both CSS and WP) so I don’t always know where plus I don’t know how it translates to smartphones. The site seems just fine on my Mac desktop & iPad and even in IE (that’s a first). Except the two stock photos are enormous in IE, I don’t know why. But one thing at a time I guess.

I need to figure out what’s pinching the header and footer on the smartphone.

The site is here, what it should look like: https://bodyfuel4health.com

Here’s a screen capture from my phone — note the short burgundy banner across the top, the stacking of header graphics; footer should have the grey area going across the page width.