Blogger.com: How to center header image and header text

So a while back blogger.com moved to their new format. I of course migrated the Elder Tribunal to the new version. I spent some time trying to figure out how to center the header image and header text. The text was easy to do. The image was easy to do in IE, but didn’t want to work in Firefox and Chrome. So I set it back to left justified and decided to wait until I had more time to play with it.

Today I sat down and in about 5 minutes figured out how to do both. So here it is for everyone else:

1. Log into Blogger.com.
1.a. If you have more then one blog click on the one that you want to edit by clicking on the title.
2. Click on the “Template” menu item on the left.
3. Under the image of tyour blob click on the “Customize” button.
4. in the header menu on the left click on “Advanced”.
5. Directly to the right of where you just clicked use the scroll bar to go to the bottom, and click on “Add CSS”.
6. In the new text area to the right enter the following code:

#header
{
text-align:center;
}
#header-inner img {
margin-left: auto;
margin-right: auto;
}

7. Click “Apply to Blog” in the upper right.