My twitter and facebook buttons are now on the side after changing the gallery to two columns, any idea why?

Upon checking you have used the float property making the next element to adjust as well. The only solutions for this kind of problem on floats is to add a clear floats to the element.

Add it to your footer tag.

footer {
 clear: both;
}

Hope this help!

So there are two problems here.

1) The social media icons are on the right.

Ans: It is simply because when you set your #gallery to float:left, the container has lost its height value. There are multiple way of doing that, one of the easiest way is to add "overflow: auto" to section. (I also noticed you put your "footer" inside "wrapper")

There's a couple of tutorials cover that, but I'm not very sure which one is it. Check out CSS Flexbox, that's a great solution of laying out your site I think.

2) The gallery pics don't align properly. (In your case the 3rd is on where the 4th supposed to be)

It happens because the height of the 1st element is too long for the 3rd to fit in. To fix this you need something called "clearfix" (you can find it in one of the web design tutorials) by adding "#gallery li:nth-child(3n) {clear:both;}" to your css.

Hope it help :)