justify-content:space-between;が効きません

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

justify-content:space-between;でheader内の要素を両端揃えにしたいのですが、
ul要素が右端ではなく中央付近に配置されてしまいます。どこに問題があるのかわからず行き詰っている状態です。
初心者のため、わかりづらい点、失礼な点がありましたら申し訳ありません。
何卒、よろしくお願いします。

該当のソースコード

HTML
1
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>My Work - Portfolio</title>
6    <meta name="description" content="テキスト">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" href="stylesheet.css">
9    <link rel="stylesheet" href="responsive.css">
10  </head>
11  <body>
12     <header id="header" class="wrapper">
13      <a class="logo" href="CSS\練習３\index.html"><img  class="logo" src="C:\Users\user\OneDrive\デスクトップ\HTML  CSS\練習３\logo.svg"></a>
14        <nav>    
15            <ul>
16              <li>Works</li>
17              <li>News</li>
18              <li>Contact</li>
19              <a herf="#"><img class="instagram" src="C:\Users\user\OneDrive\デスクトップ\HTML  CSS\練習３\icon-instagram.png">
20          </ul>
21        </nav>
22    </header>
23
24
25
26  </body>
27
28</html>

CSS
1
2
3html {
4  font-size: 100%;
5}
6
7img {
8  max-width: 100%;
9}
10
11
12.wrapper {
13    max-width: 960px;
14    margin: 0 auto;
15    text-align: center;
16
17}
18
19
20
21
22header{
23     display:flex;
24     justify-content:space-between;
25     align-items: center;
26
27}
28
29
30
31
32header ul{ 
33    list-style: none;
34    display:flex;
35
36}
37
38
39
40.instagram{
41    width:30px
42}
43
44
45
46
47

試したこと

ネットでの検索

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

どの表示が正解かはわかりませんが、とりあえずaタグの閉じ忘れがあります。
修正したら右端に寄った表示にはなりました。

Diff
1<html lang="ja">
2
3  <head>
4    <meta charset="utf-8">
5    <title>My Work - Portfolio</title>
6    <meta name="description" content="テキスト">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" href="stylesheet.css">
9    <link rel="stylesheet" href="responsive.css">
10  </head>
11
12  <body>
13    <header id="header" class="wrapper">
14      <a class="logo" href="CSS\練習３\index.html"><img class="logo" src="省略"></a>
15      <nav>
16        <ul>
17          <li>Works</li>
18          <li>News</li>
19          <li>Contact</li>
20-          <a herf="#"><img class="instagram" src="省略">
21+          <a href="#"><img class="instagram" src="省略"></a>
22        </ul>
23      </nav>
24    </header>
25  </body>
26</html>