Weird things happening with CSS after server change

Question

So I had my "My Work" page laid out exactly the way I wanted it yesterday, and I needed to change servers. I changed servers, and all my other sites are fine, but the look of my "My Work" page got messed up. Basically the background image from the bottom widget area is now in the middle of the page. It looks like nothing on this page is inside of its container anymore. It definitely was before I changed servers.

Any help would be greatly appreciated, I've no idea why it's only affecting this one page on this one site. I tried re-uploading the css file, and the entire theme to the new server and nothing changed.

Edit: Sorry, here is the css for the widget area that's floating in the middle of the page:

.widget-area {
  padding-top: 40px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 20px;
  color:#d2c1ad;
  margin-top: 3%;
  background-image:url(images/widgetarea.png);
  background-repeat:no-repeat;
  background-size: 101%;
}

Answer 1

EDIT: Floated items do not take up any space. So even though you have a bunch of .gallery-item divs in there, they are not making the container have a height since they're floated. You need to clear the float. The easiest way is to add a div after the last .gallery-item. Give it the css of clear:both;

On line 555 of your stylesheet where you have .widget-area, add:

background-position: bottom center;

Answer 2

The problem is the margin-top on your aside objects in the widget. To prove this, change the margin-top to a smaller value for your .widget class. For me, this moved the black wiggly thingy to the bottom, just above the footer, and the three aside elements were to the right, all above or below each other.

I'm guessing there is a better way to make this work, and I personally would stay away with using percentages. But I'm in no way a css expert and there are plenty of those on here that might give you a better, more robust solution to your problem.