CSS Assignment: Pet Shop

Here is my stab at completing the homework assignment to create our Pet Shop pages using CSS.

I ran into a lot of problems while constructing this page, including the following:

• Margins: These were one of the biggest challenges for me, whether I had to account for 1px borders or margins specific to a div to figure out the overall container size or to understand why certain elements were not lining up. I didn't realize that when adding padding to a div, the text does not automatically re-wrap to fit - rather it makes the div wider, which messes up the margins. I ended up spending most of my time trying to do calculations in my head and getting frustrated when I reloaded my page only to find that everything had shifted around strangely. Moving forward, I will come up with a wireframe that include margin calculations so I can keep track of any changes.
• {display: block}: I tried to get this to work with the <h3> tag so that I didn't have to make the "Pet of the Month" nav bar a whole separate div, but it didn't work. Does display: block only work with divs?
• Spacing elements within divs: How do you increase spacing between text/image elements without using margin or padding (both of which mess up the overall margins) or putting in a lot of nbsp's?
• Vertical alignment: How do you vertically align text in a div? Is this some old-fashioned idea I inherited from HTML?
• Tables: When is it okay to use tables in conjunction with CSS? To post the awards badges, I was tempted to use a table, but maybe there is a better way to do this with CSS only.
  
• Centering my page in the browser: For some reason, I can't get this to work, even though I copied the code over from one of our exercises in class.