Центрирование логотипа на шаблоне WordPress

У меня кошмар, когда я пытаюсь центрировать логотип в заголовке на шаблоне WP. Может ли кто-нибудь разработать следующий код и разместить логотип по центру?

CSS

/**
* Header
* --------------------------------------------------------------------------- */
#header {
padding-top: 3em;
margin-bottom: 2.5em; }
#header #branding {
*zoom: 1;
max-width: 80%;
display: inline-block;
text-align: left; }
#header #branding:before, #header #branding:after {
content: " ";
display: table; }
#header #branding:after {
clear: both; }
#header #site-title {
display: inline-block;
margin: 0;
font-size: 2.25em;
text-align: left; }
#header #site-title a {
display: inline-block;
text-align: inherit; }
#header #site-title img {
display: block;
text-align: inherit;
margin: 0 auto;
vertical-align: baseline; }
#header.with-woocommerce #branding {
max-width: 100%;
display: block;
text-align: center;
margin-bottom: 2em; }
#header.with-woocommerce #site-title {
text-align: center; }
#header.with-woocommerce #site-title a {
display: block; }

PHP

<header id="header" class="<?php echo $hclass; ?>">

<hgroup id="branding">
<h1 id="site-title" role="logo">
<a href="<?php echo trailingslashit( esc_url( home_url() ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
<?php if ( get_theme_mod( 'bearded_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'bearded_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<?php else : bloginfo( 'name' ); endif; ?>
</a>
</h1>
<h2 id="site-description" class="hide-for-small"><?php bloginfo( 'description' ); ?></h2>
</hgroup><!-- #branding --><hgroup id="navigation" role="navigation" >

<?php do_atomic( 'before_nav' ); ?>

<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>

<?php do_atomic( 'after_nav' ); ?>
</hgroup></header><!-- #header -->

Пожалуйста помоги. Спасибо — любой совет будет высоко ценится!