http://pastebin.com/Q9SYRRz6
Try this. Your margin-bottom value should always be as big as your "top" value to negate the space the image/boxes are pushed upwards. So a picture with "top:-400px" should also have "margin-bottom:-400px" accordingly. In your case you left the margin-bottom at -50px for everything, which is what messed with your positioning ultimately.
buncha weird stuff due to
http://pastebin.com/
http://pastebin.com/dUkM6gsp
You can sure try, that would be really appreciated. this stuff is so fiddly :c
http://pastebin.com/Q9SYRRz6
Try this. Your margin-bottom value should always be as big as your "top" value to negate the space the image/boxes are pushed upwards. So a picture with "top:-400px" should also have "margin-bottom:-400px" accordingly. In your case you left the margin-bottom at -50px for everything, which is what messed with your positioning ultimately.
ff you're awesome 8D thank