emilyTK

Confirmed, it really looks wrong. But it also looks like some of the rules are taken into account by your iPhone, because the menu shows up with a grey background like it’s supposed to.
Did you make any changes to your CSS styles? Because you might have forgotten a semicolon somewhere down the road.

Too bad I have no iPhone 5 to view this in.

Makes perfect sense. Glad it worked out. ??

There’s a WordPress subforum for those kinds of requests.

Are we talking about the same white background? Is this it?
https://i.imgur.com/FGHlBUA.png

All you need to do is override it in your custom CSS, like so:

.entry-header, .entry-content {
	background: red;
}

Choose any colour.

OHELLOAGAIN! You should update your Internet Explorer, because it works perfectly in IE11. For all older versions of IE, avoid working with the rem unit in CSS font shorthand, because IE up to version 11 will not understand.
See: https://stackoverflow.com/questions/16157342/css-rem-unit-not-working-with-font-declarations

Your background colour is now #bbd6af, an enjoyably light teal.

https://i.imgur.com/P3flPrx.png

Looks fine in my browser and on my Android phone. What mobile device and browser are you using?

Can you provide a link to your website?

Oh alright. So the bad news is: This really won’t make things easy. The good news is: I can think of two options:

#1: Make a child theme and change the order of sections being included into all the pages. The whole #secondary section needs to be above the main content in the PHP partials. Next, you will have to adjust the CSS for #secondary, overriding Twenty Fourteen declarations from line 3689 on in your child theme’s style.css.

#2: Learn to understand CSS flexbox, define your HTML sections as flex items and change their order. Alternatively, find a friend who will do this for you, because this goes way beyond WordPress forum help.

The whole HTML output of Twenty Fourteen is leading up to it. It appears at the bottom of the page, because it is included into the page after the main content.

Note that if you move it to the left side of the screen for small screen resolutions, the black area is likely going to cover the full screen, and a horizontal scroll bar will appear.

wp-content is in the root directory of your WordPress installation. It’s one of the first folders you find when accessing your WordPress installation on the server using an FTP programme.

Sweet, yeah, they sound like great support.

For the black bar only, you might use

.header-bar a{
	color: #fff;
}

I checked your site again though. There is no more text in the black bar (unlike earlier). There’s only the icons left now. So I couldn’t really test it properly this time.

.site-header a {
	color: #fff;
}

There’s a limit in WordPress, but it’s like 49 or so. Find out more here:
https://sevenspark.com/wordpress/menu-item-limit