quick follow up... about the squishing of your images, ie the front page, are you referring to when you shrink the browser down they close into each other?
That is because the custom bordering you did for the images which takes up pixel space on the sides of each image. The responsive theme will resize (downsize) the image to fit as you reduce the browser viewing area, but the bordering takes up space. It's a techy thing but when styling the outside of an image, you have to account for the space that styling needs per image. The responsive sizing of images is set to width: 100%
The best way to describe this is:
If you have 4 columns, each is 100px wide and you put an image in each one (without bordering or styling), the responsive coding will make each image 100px as well so it fits in each one.
Now, if you add a border to the <img> tag as you did which is 10px thickness, this adds 20px per image for a total of 80px more width (space) is needed. The bordering is not a container, so then your images will maintain their 100% width to fill the actual container they are in. With the added size of bordering, your image will not adjust to fit in the bordering because the border styling is not a container, so the image does not resize to adjust to that.
lol, confusing I know. Not an easy solution to fix, other than changing the css for img width: 100% to be something like 99% or something like that. A quick look on Google brings up several related issues and each requires the user to do custom changes based on their needs:
Do a google search with: responsive images with borders
Then visit the various websites that show up in the results.