I haven't looked into your reply yet, but I will.
I thought I could present the problem more clearly with this image:
This image is showing the left half of the screen with 6 columns of a 12 column grid.
The blue lines represent the grid on which the items are placed. The yellow are two divs to hold content. The red is the photo placed in the grid using margins.
What I want to do is to center the "Name of the Photo" under the photo. Unfortunately on everything I have tried, it get broken when the page size changes.
I am a 78 year old retired Electronic Engineering Manager. When I retired 13 years ago, I took up photography and have a studio where I have been photographing models, actors, singers and dancers since I started the business.
If anyone is interested, here is my company website: http://www.lawrencecreativephotography.com
I have been hand-coding websites since the mid 1980's. I have built some quite complex websites including a flash website loaded with animation for a company. I have built many sites for industrial companies, in fact I was flown across the country to photograph the products and facilities for a large explosive manufacturing company. I used the photo in a website I designed for them.
I job I am working on now started out as a simple website with just a couple of pages. Unfortunately, after I had the site almost completed the client wanted it changed to a responsive website, and wanted to make sure it would work on everything from the oldest iPhone to the largest desktop monitor.
This was about 2 weeks ago. I have been studying everything I can find on "Responsive Website Design", but having a hard time wrapping my head around this.