How to Center Header Image In Blogger's New Template Designer

After googling here and there, finally I managed to center back my header image since it moved to the left after I changed to the new template.

Yes, I am noob, so I find the easiest and most understandable method to fix it. Here I share techniques in case some of you have the same problem like me.

First go to

Design > Template Designer > Advanced (on left) > Add CSS (bottom of Advanced list).

In the Add custom CSS box, add two styles:

#Header1_headerimg {margin:0 auto;}
.Header .description {text-align:center}

The preview should show the change.

Click APPLY TO BLOG.

View the blog.

It may not look quite right, but there is 40+ pixels of transparency on the right side of the image and much less on the left.

If that get's close, it may be possible to add some padding to make it look closer to the center, but the extra transparency is a factor.

#Header1_headerimg {margin:0 auto; padding-left:30px}

Then play with the padding.

Happy blogging