Need help with personal project ...

I recently finish the How to Make a Website course, and I wanted to start practicing my new skills on a similar website to the one that was created throughout the How to Make a Website course. The end product of the course was creating a personal portfolio/gallery. I wanted to create a similar product, but for my schools journalism club. Here is what I came up with: http://imgur.com/vHHukkf . As you can see, the column order kind of collapsed. An image is barely showing at the bottom, I couldn't get the entire page. I even thought it would look cool to have a similar layout to how content is shown on Pinterest. The goal of my product is to show images, a headline below it, and below that ... a short description. You can click on the boxes to go to the articles. However, the problem at hand here is the differing sizes of the boxes and images throwing the order that I once had ... off. My code is almost exactly the same as the projects, just a colors and a couple things I changed. But I was wondering if someone could guide me in the direction I should go to add order, or at least a 'Pinterest like' layout of content. Hopefully this can become a learning experience for me in the end. Any help is greatly appreciated, thank you for your time

I had a great deal of time trying to paste the code onto this post, and it made the post extremely long. I just posted the code onto a public document, Google Docs : https://docs.google.com/document/d/1X7EUqNSsHDUSmmfKtXk3VW1yNs2XUSFYnpT-7z24iTo/edit?usp=sharing

I also, have it on a workspace: http://web-x03pgo6ate.treehouse-app.com/