How to: center logo on mobile?

Thanks again for the great theme.

I have a custom logo in the header. On a mobile, the image looks awkward on the left hand side, probably due to size. I tried to center it. What I found was if I replace the following CSS, the image will center. However, the responsiveness area remains justified left, meaning most of the image is no longer touchable. How can shift the touch zone to the center as well?

/* original –
a#logo { height:100%; display: block !important; }
a#logo img { width:auto; max-width:90%;height:80%; }
.safari a#logo img { max-height: 80px;height:auto; } */

/* new – */
a#logo { height:100%; display: block !important;}
a#logo img { width:auto; max-width:90%;height:80%;display: block;margin:0px auto;}
.safari a#logo img { max-height: 80px;height:auto;}