WPテンプレートのtwentyseventeenヘッダーについて

ワードプレステンプレートのtwentyseventeenを使用しております。
ヘッダーの高さとロゴの位置を以下の配置に変更したく悩んでおります。

また、ロゴと同じ高さで右端にSNSアイコンを配置したいと考えております。
以下画像の右端にある●の部分にアイコンを入れたいのですが、
CSSの指定方法がわからず悩んでいます。

現在は以下の画像の表示なのですが、変更するにはどうしたら良いでしょうか。

html
1----------------------------------------------------
2ヘッダーコード
3----------------------------------------------------
4<?php
5/**
6 * The header for our theme
7 *
8 * This is the template that displays all of the <head> section and everything up until <div id="content">
9 *
10 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
11 *
12 * @package WordPress
13 * @subpackage Twenty_Seventeen
14 * @since 1.0
15 * @version 1.0
16 */
17
18?><!DOCTYPE html>
19<html <?php language_attributes(); ?> class="no-js no-svg">
20<head>
21<meta charset="<?php bloginfo( 'charset' ); ?>">
22<meta name="viewport" content="width=device-width, initial-scale=1">
23<link rel="profile" href="http://gmpg.org/xfn/11">
24
25
26<?php wp_head(); ?>
27<script>
28jQuery(function(){
29	var topBtn = jQuery('#re-top');
30    		topBtn.hide(); //最初は非表示
31    		jQuery(window).scroll(function() {
32			if (jQuery(this).scrollTop() > 700) { //700以上、下にスクロールされた時
33				topBtn.fadeIn(""); //表示
34			} else { //それ意外は
35				topBtn.fadeOut(""); //非表示
36		}
37	});
38});
39</script>
40<!-- #TOPへ戻る用アイコン 追加コード -->
41</head>
42
43<body <?php body_class(); ?>>
44			<?php dynamic_sidebar('header_widget_no_title'); //ヘッダー下ウィジェット（タイトルなし） ?>
45<?php dynamic_sidebar('header_widget'); //ヘッダー下ウィジェット（タイトルあり） ?>
46<div id="page" class="site">
47	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
48<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
49	<header id="masthead" class="site-header" role="banner">
50		
51		<?php if ( has_nav_menu( 'top' ) ) : ?>
52			<div class="navigation-top">
53				<div class="wrap">
54					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
55				</div><!-- .wrap -->
56			</div><!-- .navigation-top -->
57		<?php endif; ?>
58
59	</header><!-- #masthead -->
60
61	<?php
62
63	/*
64	 * If a regular post or page, and not the front page, show the featured image.
65	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
66	 */
67	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
68		echo '<div class="single-featured-image-header">';
69		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
70		echo '</div><!-- .single-featured-image-header -->';
71	endif;
72	?>
73
74	<div class="site-content-contain">
75		<div id="content" class="site-content">
76

CSS
1
2/*--------------------------------------------------------------
313.1 Header
4--------------------------------------------------------------*/
5
6#masthead .wrap {
7	position: relative;
8}
9
10.site-header {
11	background-color: #fafafa;
12	position: relative;
13}
14
15/* Site branding */
16
17.site-branding {
18	padding: 1em 0;
19	position: relative;
20	-webkit-transition: margin-bottom 0.2s;
21	transition: margin-bottom 0.2s;
22	z-index: 3;
23}
24
25.site-branding a {
26	text-decoration: none;
27	-webkit-transition: opacity 0.2s;
28	transition: opacity 0.2s;
29}
30
31.site-branding a:hover,
32.site-branding a:focus {
33	opacity: 0.7;
34}
35
36.site-title {
37	clear: none;
38	font-size: 24px;
39	font-size: 1.5rem;
40	font-weight: 800;
41	line-height: 1.25;
42	letter-spacing: 0.08em;
43	margin: 0;
44	padding: 0;
45	text-transform: uppercase;
46}
47
48.site-title,
49.site-title a {
50	color: #222;
51	opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
52}
53
54body.has-header-image .site-title,
55body.has-header-video .site-title,
56body.has-header-image .site-title a,
57body.has-header-video .site-title a {
58	color: #fff;
59}
60
61.site-description {
62	color: #666;
63	font-size: 13px;
64	font-size: 0.8125rem;
65	margin-bottom: 0;
66}
67
68body.has-header-image .site-description,
69body.has-header-video .site-description {
70	color: #fff;
71	opacity: 0.8;
72}
73
74.custom-logo-link {
75	display: inline-block;
76	padding-right: 1em;
77	vertical-align: middle;
78	width: auto;
79}
80
81.custom-logo-link img {
82	display: inline-block;
83	max-height: 80px;
84	width: auto;
85}
86
87body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
88body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
89	max-height: 200px;
90	max-width: 100%;
91}
92
93.custom-logo-link a:hover,
94.custom-logo-link a:focus {
95	opacity: 0.9;
96}
97
98body:not(.title-tagline-hidden) .site-branding-text {
99	display: inline-block;
100	vertical-align: middle;
101}
102
103.custom-header {
104	position: relative;
105}
106
107.has-header-image.twentyseventeen-front-page .custom-header,
108.has-header-video.twentyseventeen-front-page .custom-header,
109.has-header-image.home.blog .custom-header,
110.has-header-video.home.blog .custom-header {
111	display: table;
112    height: 15vh;
113	width: 100%;
114}
115
116.custom-header-media {
117	bottom: 0;
118	left: 0;
119	overflow: hidden;
120	position: absolute;
121	right: 0;
122	top: 0;
123	width: 100%;
124}
125
126.custom-header-media:before {
127	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
128	background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
129	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
130	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
131	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
132	bottom: 0;
133	content: "";
134	display: block;
135	height: 100%;
136	left: 0;
137	position: absolute;
138	right: 0;
139	z-index: 2;
140}
141
142.has-header-image .custom-header-media img,
143.has-header-video .custom-header-media video,
144.has-header-video .custom-header-media iframe {
145	position: fixed;
146	height: auto;
147	left: 50%;
148	max-width: 1000%;
149	width: auto;
150	top: 50%;
151	padding-bottom: 1px; /* Prevent header from extending beyond the footer */
152	-ms-transform: translateX(-50%) translateY(-50%);
153	-moz-transform: translateX(-50%) translateY(-50%);
154	-webkit-transform: translateX(-50%) translateY(-50%);
155	transform: translateX(-50%) translateY(-50%);
156}
157
158.wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */
159	background-color: rgba(34, 34, 34, 0.5);
160	border: 1px solid rgba(255, 255, 255, 0.6);
161	color: rgba(255, 255, 255, 0.6);
162	height: 45px;
163	overflow: hidden;
164	padding: 0;
165	position: fixed;
166	right: 30px;
167	top: 30px;
168	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
169	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
170	width: 45px;
171}
172
173.wp-custom-header .wp-custom-header-video-button:hover,
174.wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */
175	border-color: rgba(255, 255, 255, 0.8);
176	background-color: rgba(34, 34, 34, 0.8);
177	color: #fff;
178}
179
180.admin-bar .wp-custom-header-video-button {
181	top: 62px;
182}
183
184.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
185	bottom: 0;
186	position: absolute;
187	top: auto;
188	-ms-transform: translateX(-50%) translateY(0);
189	-moz-transform: translateX(-50%) translateY(0);
190	-webkit-transform: translateX(-50%) translateY(0);
191	transform: translateX(-50%) translateY(0);
192}
193
194/* For browsers that support 'object-fit' */
195@supports ( object-fit: cover ) {
196	.has-header-image .custom-header-media img,
197	.has-header-video .custom-header-media video,
198	.has-header-video .custom-header-media iframe,
199	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
200		height: 100%;
201		left: 0;
202		-o-object-fit: cover;
203		object-fit: cover;
204		top: 0;
205		-ms-transform: none;
206		-moz-transform: none;
207		-webkit-transform: none;
208		transform: none;
209		width: 100%;
210	}
211}
212
213/* Hides div in Customizer preview when header images or videos change. */
214
215body:not(.has-header-image):not(.has-header-video) .custom-header-media {
216	display: none;
217}
218
219.has-header-image.twentyseventeen-front-page .site-branding,
220.has-header-video.twentyseventeen-front-page .site-branding,
221.has-header-image.home.blog .site-branding,
222.has-header-video.home.blog .site-branding {
223	display: table-cell;
224	height: 100%;
225	vertical-align: bottom;
226}
227
228