emilyTK

Sounds like you tried rearranging your folders on the server. If so: Of course it broke your site.
You should consider thinking about what paths you would like *before* installing WordPress, not after. You could just reinstall the software.

Chrystal, I’m exactly like you in that I trashed all the media queries of my parent theme and styled my website from scratch. Because adjusting an already responsive theme to an entirely new content really is a pain.

What Andrew said is a good tip to get you started. The mobile-first approach is indeed one way to go, and a lot of professionals choose to build websites that way nowadays. Just work yourself up, breakpoint by breakpoint, from smallest to biggest viewport widths. (This means, you’ll be putting min-width in media queries rather than max-width.)
You won’t need a lot of these breakpoints either. Even if, for some reason, Twenty Fourteen has 12 or 14 (!) of them: two or three breakpoints usually suffice.

Just adjust the padding on #supplementary to something you like. Remember that margin-top on aside and padding-top on #supplementary need to add up to the same value as your padding-bottom on #supplementary.

You could install the Custom CSS plugin for WordPress, then put your code there.

Try this:

.post-thumbnail img{
	width:inherit;
}

Stell Dir vor, Du möchtest Geschenk verpacken. Dein Geschenk wird der content Deiner Paket-Box. Um Dein Geschenk zu schützen, wickelst Du es in Zeitungspapier. Das Zeitungspapier ist Dein padding. Dann packst Du Dein Geschenk in die Paket-Box. Die Pappe der Paket-Box ist Deine border.
Beim Transport bist Du vorsichtig, dass keine anderen Gegenstände das Geschenk zerdrücken, also stellst Du die anderen Gegenstände aus dem Weg. Die Entfernung zwischen den anderen Gegenständen und Deinem Geschenk ist der margin.
(Du siehst, dass die Menge Zeitungspapier-padding unabhängig ist vom margin, der Entfernung anderer Gegenstände zu Deinem Geschenk.)

Imagine wrapping a gift. Your gift will be the content of your package-box. In order to keep your gift safe, you’re wrapping it into newspaper. The newspaper is your padding. You then put your gift into a package, which has cardboard (or gift wrap) borders.
When transporting your present, you’re wary it’d not be crushed by other objects, so you’re putting those other objects away, giving your present a margin towards them.

—-

As for your question about borders: In CSS3, you can determine how your boxes size should be affected by the border. See this:
http://stackoverflow.com/questions/3595230/css-border-on-a-div-acts-differently

—-

Now the picture you linked to is about a concept that is called “collapsible margins”. And believe you me: You don’t want to go there, lol. I’m not sending you any links on this. I won’t be what’s causing your nightmares tonight. 8)