header部分、画像の横にナビゲーションを横並びしたいが、高さが合わない。

完全に独学で一つ一つ調べながら行っているど初心者です。
専門用語をたくさん並べられると理解が及ばない恐れがあるので、
お手柔らかに教えていただけると幸いです。

header部分にロゴ画像(.svg)と同じ高さ（下揃え希望）にナビゲーションを配置したいのですが、横並びになるものの、高さがずれてしまいます。

何か不足しているもの、もしくは、不必要なものがあれば教えていただきたいです。
どうぞよろしくお願いいたします。

<header class="page-header wrapper">
       <h1><a href="bese.html"><img class="logo"src="image/logo.svg" alt="ホーム"></a></h1>
       <link rel="stylesheet" href="logo.css">
       <nav>
          <ul class="main-nav">
            <li><a href="About">About</a></li>
            <li><a href="WORKS.html">WORKS</a></li>
            <li><a href="NEWS.html">NEWS</a></li>
            <li><a href="CONTACT.html">CONTACT</a></li>
            <link rel="stylesheet" href="nav.css">
          </ul>
        </nav>
    </header>

logo.css
1
2@charset "UTF-8";
3
4h1{
5  font-family:'Quicksand'
6}
7
8.logo{
9  width:150px;
10}
11
12.wrapper{
13  max-width:1100px;
14  margin:0 auto;
15  padding:0 I 4%;
16}
17

nav.css
1
2@charset "UTF-8";
3nav{
4  font-family:'Quicksand', sans-serif;
5}
6.main-nav{
7  display: flex;
8  font-size:1.25rem;
9  text-transform:uppercase;
10  margin-top:34px
11  list-style:none;
12}
13.main-nav li{
14  margin-left:36px;
15}
16.main-nav a{
17  color:#432;
18}
19.main-nav a:hover{
20  clor:#0bd;
21}
22.page-header {
23  display:flex;
24  justify-content: space-between;
25}
26.page-header{
27  margin-top:30px;
28}
29

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

回答1件

ベストアンサー

下記の設定を加えてみてください。

CSS
1.page-header { align-items: flex-end; }
2.page-header h1 { margin: 0; }
3.page-header h1 img { vertical-align: bottom; }
4.page-header ul.main-nav { margin: 0; line-height: 1; }