Thematic Child theme web navigation looks weird on iPhone

Hi,

I would appreciate it if someone can check out my website on their computer, tablet, and smart phone and offer some insight into making this website more consistent between all three.

I am designing my third custom child theme website on the Thematic framework. I am experiencing an issue that did not happen with the other sites.

This site looks good on the computer and okay on the iPad. However, the navigation is strange on the iPhone. Originally, it was going on two lines (even when there was room). I sized the font size down. Now, the words for the certain navigation links will size down further and it doesn’t even correlate with the current page. I really need to get this working correctly. I can live with the website not looking exactly the same on the iPhone but this behavior will look like a mistake to a user.

Another more minor issue is the website: The website is centered on the computer but left justified on iPhone and iPad. It would be great for all to be centered, regardless of device.

I am not very good at PHP, so any solutions that are HTML/CSS only would be great!

emolldesign.com/woofums

Thanks!!