Adventure: Reclaim the fifth column

Here's why the fifth column was gone. In boostrap there
is a 15px padding on the left and the right for the
container element. It was not affecting the children
in the rows, but after I added margin to the rows, then
it came into effect.

This also affected the photos, which are in their own row.
Before they were unaffected by the padding, but now they
are effected. Essentially there was 30px less to work with
in the container, so instead of being 500px and being able
to have 5 columns of 100px images, it could only have 4.

I need to add in the 30px to the max-width of the container,
bringing it up to 530px, and also I changed the margin from
4px to 1px (it's not really doing anything except making the
padding affect what is in the rows). Adding those 2px in, I'm
confident that 532px is the right max-width for the container.

Eventually I should put the photos in their own div that has
a bootstrap column class, so it will look better on all devices.