Aligning social media with site title in header

Here is the header code from the child theme which contains the site title and tagline, with the inserted social media as “header-icons” class:

<div class="site-branding">

			<?php if ( get_header_image() ) : ?>

			<div class="site-image">

				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home" class="header-image-link">

					<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

				</a>

			</div><!-- .header-image -->

			<?php endif; ?>

			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

			<?php if ( '' != get_bloginfo( 'description' ) ) : ?>

			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

			<?php endif; ?>

<div id="header-icons">

<ul>

<li><a href="https://www.englishlc.com/contact-us/"><img src=https://www.englishlc.com/wp-content/uploads/2013/11/email.png alt="Contact us" title="Contact us"></a></li>

<li><a href="https://www.englishlc.com/feed" target="_blank"><img src=https://www.englishlc.com/wp-content/uploads/2013/11/rss32px.png alt="RSS feed" title="RSS feed"></a></li>

<li><a href="https://plus.google.com/+EnglishLanguageCentre" target="_blank"><img src=https://www.englishlc.com/wp-content/uploads/2013/11/googleplus.png alt="ELC on Google+" title="ELC on Google+"></a></li>

<li><a href="https://twitter.com/englishlangcent" target="_blank"><img src=https://www.englishlc.com/wp-content/uploads/2013/11/twitter.png alt="ELC on Twitter" title="ELC on Twitter"></a></li>

<li><a href="https://www.facebook.com/pages/English-Language-Centre/289037641172669" target="_blank"><img src=https://www.englishlc.com/wp-content/uploads/2013/11/facebook.png alt="ELC on Facebook" title="ELC on Facebook"></a></li>

</ul>

</div>     

		</div><!-- .site-branding -->

If you have simply replicated the parent theme css, try adding margin-top: -70px to #header-icons in your child theme css.

#header-icons {
    display: inline;
    float: right;
    margin-top: -70px;
    padding-left: 15px;
    width: 300px;
}

I have an empty child style.css which I am adding any modification too. I had most of the above for the header-icons class, but the margin-top: -70px; was the magic bullet.

I’m no expert in css, but I’m learning, and can see that it rules supreme when it comes to styling pages.

Many thanks for your advice!