ヘッダー（メニューバー）の右端にボタンアイコンを２つ並べるには

どうしてもわからず、質問させてください。
現在レスポンシブサイトを制作していますが、
ヘッダーの右端（横幅１２８０pxでつくっているのでそれに合わせたい）に
ツイッターアイコンと楕円のアイコンを横並びで置きたいのですが、
うまく表示させることができません。

メニューバーの上の中央にはロゴアイコンを表示させており、
それと同列にしたいです。
ですがロゴの下の段に追いやられてしまいます。。

全くの初心者でお見苦しいですが、コードは下記のようにしております。

html
1</head>
2<body>
3  <div id="wrapper">
4	  <main>
5	  
6    <header>
7       <div class="header1">
8		  <div class="logo">
9		  <a href="index.html"><img src="images/logo_header.png" alt="●●●●●" width="70px"></a>
10		  </div>
11		   <div class="spMenuWrap">
12			<div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
13		   </div>
14		      <ul class="header_sns">
15                 <li><a href="https://twitter.com/" target="_blank"><img src="images/icon_tw.png" alt="twitter" height="30px"></a></li>
16			     <li><a href="http://" target="_blank"><img src="images/button_theaterinfo.png" alt="●●●●●" height="30px"></a></li>
17	    </div>
18		<nav class="gnav">
19			<ul>
20				<li><a href="#intro">INTRODUCTION</a></li>
21				<li><a href="●●●●●.html">●●●●●</a></li>
22				<li><a href="●●●●●.html">●●●●●</a></li>
23				<li><a href="●●●●●.html">●●●●●</a></li>
24				<li><a href=".html"><font color="#DDDDDD">●●●●●</font></a></li>
25				<li><a href="tickets.html">●●●●●</a></li>
26				<li><a href="goods.html">●●●●●●●●●●</a></li>
27				<li><a href="goods.html">TWITTER</a></li>
28			</ul>
29		</nav><!-- /.inner -->
30</header>
31

@charset "UTF-8";

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.only_pc { display: block !important; }
.only_sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.only_pc { display: none !important; }
.only_sp { display: block !important; }
}

.top_visual img {
    width: 100%;
    height: auto;
}

#contents {
	width: 1280px;
	margin-top: 100px;
	margin-bottom: 100px;
	margin-left: auto;
    margin-right: auto;
}

header + #contents {
	padding-top: 50px;
}

.inner {
	position: relative;
	width: 1280px;
	margin: 0 auto;
}

a {
	color: #043771;
	text-decolation: none;
}
a:hover {
	text-decolation: underline;
	color: #144d8d;
}

h1 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 28px;
	text-align: center;
	line-height: 1.0;
}

h2 {
	margin-top: 1em;
	margin-bottom: 0em;
	font-size: 14px;
	color: #333;
	text-align: center;
	line-height: 1.0;
}

h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 20px;
	font-weight: bold;
	text-align:center;
}

h4 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
}

h5 {
	margin-bottom: 0.25em;
	padding-left: 25px;
	font-size: 16px;
	background: url('../images/bg_arrow_black.png') 0 50% no-repeat;
}

h6 {
	margin-bottom: 0.25em;
	padding-left: 5px;
	font-size: 16px;
	font-weight: bold;
}

p {
	margin:0 0 1em 0;
	font-size: 16px;
	font-weight: bold;
	text-align:center;
}

section {
    width: 100% !important;
    margin: 0px auto 0px auto;
    padding: 40px 0px 0px 0px;
    background-image: url(../images/top_intro.jpg);
    background-position: center;
    text-align: center;
}

img {
	max-width: 1280px;
	vertical-align: bottom;
}

em {
	font-weight: bold;
}

strong {
	font-weight: bold;
	color: #ff0000;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom: 1em;
	padding: 1em;
	border: 1px dotted #ddd;
	border-left: 5px solid #ddd;
}

ul,ol,dl {
	margin: 0 0 1em 0;
}
ul li {
	list-style: disc;
}
ol li {
	list-style: decimal;
}
li {
	margin-left: 2em;
}

dt {
	margin-bottom: 0.5em;
	border-bottom: 1px dotted #ddd;
}
dd {
	margin-bottom: 1em;
}

table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	border: 1px solid #ddd;
}
th {
	padding: 10px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ddd;
	background: #f1f1f1;
}
td {
	padding: 10px;
	text-align: left;
	border: 1px solid #ddd;
}

.credit_small0 {
    font-size: 12px;
    text-align: center;
    margin: 0px 0px 0px;
}

ul, ol {
    margin: 0;
    padding: 0;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}



/*================================================
 *  汎用クラス
 ================================================*/
/* 中央寄せ */
.center {
	text-align: center;
}

/* 左寄せ */
.left {
	text-align: left;
}

/* 右寄せ */
.right {
	text-align: right;
}

/* 写真中央寄せ */
.imgC {
	clear:both;
	overflow:hidden;
	margin: 0 auto 50px auto;
	margin-bottom:50px;
	text-align:center;
}
.imgC img {
	margin-bottom:10px;
}

/* 写真左寄せ */
.imgL {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgL img {
	float:left;
	margin:0 10px 0 0;
}

@media screen and (max-width:767px) {
	.imgL {
		margin-bottom:20px;
	}
	.imgL img {
		float:none;
		margin:0 0 10px 0;
	}
}

/* 写真右寄せ */
.imgR {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgR img {
	float:right;
	margin:0 0 0 10px;
}

@media screen and (max-width:767px) {
	.imgR {
		clear:both;
		overflow:hidden;
		margin-bottom:20px;
	}
	.imgR img {
		float:right;
		margin:0 0 10px 0;
	}
}

/* ボタン */
.btn a {
	position: relative;
	display: inline-block;
	padding: 8px 40px 8px 40px;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
	z-index: 1;
	background: #000;
}
.btn a:hover {
	color: #fff;
	background: #333;
}


	/* 共通 */
	
	.logo{
		    position: absolute;
    top: 10px;
    left: 50%;
    margin: 0px 0px 0px -80px;
}
	
	.class header_sns {
	float: right;
    margin: 20px 0px 0px 0px;
}
	
	
	nav.gnav ul {
		margin: 0;
		padding: 0;
	}
	nav.gnav ul li {
		position: relative;
		line-height: 50px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav.gnav ul li a {
		display: block;
		background: #fff;
		color: #000;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
	}
	nav.gnav ul li:hover > a {
		color: #333;
		background: #FCFFD7;
	}
/*================================================
 *  フッター
 ================================================*/
	footer {
		width: 100%;
	    clear: both;
		margin-top: 80px;
		background: #ddd;
	}

.copyright {
	padding: 20px 0;
	color: #353535;
	font-size: 11px;
	text-align: center;
	background: #ddd;
	line-height: 150%
}

@media screen and (max-width:767px) {
	footer {
		margin-top: 40px;
	}

	.fnav {
		display: block;
		margin: 0;
	}
	.fnav > ul {
		width: 100%;
	}
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
	z-index:1;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#111;
}
.totop img:hover {
	background:#222;
}


/*================================================
 *  タブレット・スマートフォン向けデザイン
 ================================================*/
/* テンプレートより小さくなった場合に適用 */
@media screen and (max-width:979px) {
	.header1 {
		width: 100%;
	}

	#contents {
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px;
	}

	footer {
		width: 100%;
	    clear: both;
		margin-top: 80px;
		background: #ddd;
	}

	.lock {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
	}
}

表示させたいイメージはこのような感じです。

途方に暮れております、、どなたかご親切な方、ご回答いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

twitterアイコン部分に.only_pcが付いていなかったり、
セレクタが.class header_snsになっているなど
基礎が全然できていないので、もっと基礎を学習してから
Webサイトを制作をしたほうが良いです。
このレベルのままでは何ヶ月たっても完成しないです。

投稿2019/07/15 10:00

yasutomi

総合スコア2937

suzuri

2019/07/15 10:47 編集

そうなんです、ほぼほぼ分かっていないところから急にサイト作成を頼まれておりまして、フリーのテンプレートを元に改造しているのですがこのような有様です。。アイコン部分に「.only_pc」をつける、といったところは具体的にどう書き換えればよろしいでしょうか。申し訳ありませんが、教えていただけると大変助かります。 <li><div class=".only_pc"><a href="https://twitter.com/" target="_blank"><img src="images/btn_twitter.png" alt="twitter" height="30px"></a></div></li> としてみましたが、スマホ版で消えてくれませんでした、、（おそらくdivの使い方が間違っているんだとは思います）

suzuri

2019/07/15 11:52

すみません、他所で解決できました。

行動規範の内容に同意します