HTML/CSS ヘッダーの表示方法について

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML/CSSの勉強を始めたところです。
headerの表示方法について教えていただきたいです。初歩的な質問かと思いますがよろしくお願いします。
以下のように
「ロゴ(SVG)」の横に社名、その下にサブタイトル、そして右寄せでnav要素を組み込みたいのですが
今までに「header」と「nav」を別々に組み立てる記述しかしたことがありません。
このような表示にするためには、どのようなHTMLとCSSの記述になりますでしょうか？

発生している問題・エラーメッセージ

HTMLの記述に対して、画像のような組み立てにするCSSが思い浮かばない。

該当のソースコード

HTML
ソースコード

<header> <div id="logo"> <a href="index.html"><img src="images/LOGO.svg" width="60" height="60" alt="ロゴ"><h1>株式会社〇〇</h1><span>〇〇販売会社</span></a> </div> <nav id="g_nav"> <ul> <li><a href="#">サービス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">新着情報</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#"><img src="images/iconfinder-social-media-applications-3instagram-4102579_113804.svg" width="30" height="30" alt="インスタ"></a></li> </ul> </nav> </header> ### 試したこと

HTMLの記述のみ行いましたが、CSSでの加飾方法がイマイチわかっておりません。

補足情報（FW/ツールのバージョンなど）

HTML5/CSS3

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

回答1件

ベストアンサー

ロゴと会社名の段組みを横に揃えたいなら

<h1>株式会社〇〇</h1><span>〇〇販売会社</span> をdivなどでグルーピングした方がよいかもしれませんね

CSS
1<style>
2header{
3display:flex;
4  justify-content:space-between;
5}
6header h1{
7margin:0;
8padding:0;
9}
10#logo a{
11display:flex;
12}
13nav ul{
14  list-style:none;
15display:flex;
16}
17nav li{
18  margin-left:10px;
19}
20</style>
21<header>
22<div id="logo">
23<a href="index.html"><img src="images/LOGO.svg" width="60" height="60" alt="ロゴ"><div><h1>株式会社〇〇</h1><span>〇〇販売会社</span></div></a>
24</div>
25<nav id="g_nav">
26<ul>
27<li><a href="#">サービス</a></li>
28<li><a href="#">会社情報</a></li>
29<li><a href="#">新着情報</a></li>
30<li><a href="#">お問い合わせ</a></li>
31<li><a href="#"><img src="images/iconfinder-social-media-applications-3instagram-4102579_113804.svg" width="30" height="30" alt="インスタ"></a></li>
32</ul>
33</nav>
34</header>