The span tag broke my webpage?

So, I'm having a very strange problem. I'm hoping you guys can help me figure it out.

I had this page, completely functional. I remember having grey bars behind the centered text, and was confused not to find them. I tried adding a background tag to the corresponding CSS element but it didn't work. Added "display:block;", also didn't work. So I tried the span tag in the html itself, and that's when it all went wrong. The formatting of that element went crazy. I removed all the extra tags I added (which now miraculously worked, even though the formatting was way off) to try and fix whatever just broke, but that didn't work. So now I'm stuck with 1.png, but the page is still fully functional.

I decided to tackle this another way. I already had the page open in my browser, so I saved the page to my Desktop, and it came out looking like 2.png in the shared folder. Not only with the background missing, only one of the slideshow elements is still visible! The JavaScript still works though.

Okay, maybe the problem is with the linking of the HTML with its external CSS, images and JS. So I move the HTML to the same folder as the main index.html and change all the tags within the new HTML to point at the locations of the old CSS, images and JS. And that's when I reached 3.png. This time, everything works, except the JS and the web fonts.

I don't understand this. What is this CSS/HTML sorcery? Can anyone figure this out? I mean sure my goal is to fix this, but I also want to understand what broke and how it happened. The source code is identical in all 3 cases. There are only 2 HTML files and 2 style.css stylesheets. This is so perplexing.

Here is the shared folder with all the files: https://drive.google.com/open?id=0B2ulVSnB6jnFcVZBSzk3SFJST3M

index.html is the original, along with the css, img, js and f-a folders. The other HTML is the one I saved. It retained the page title as the file name, and brought with it the _files folder by the same name.