Centring logo on Wordpress template

Question

I'm having a nightmare trying to center a logo in the header on a WP template. Can anyone please work out the following code and center the logo?

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 -->

Please help. Thank you - any advice would be much appreciated!

Answer 1

Add to CSS:

#site-title img {
    margin-left: 45%;
}

Answer 2

Based off your more recent changes to the site you can add this to center the logo

#header #branding, #header.with-woocommerce #branding {
  display: table;
  margin: 0 auto;
}

If you go back to where the shop-nav is not full width I would make the header position relative and absolute position the shop-nav top right 0.

Answer 3

将id =“ site-title”留给左边距：43％