CSSで要素を両端に表示したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
header部分、ロゴとnavを横並び、かつ両端に置きたいです。

該当のソースコード

HTML
1ソースコード
2<div class="wrapper">
3      <header class="header">
4        <img src="assets/images/logo.png" width="80px" alt="企業ロゴです">
5        <nav class="nav">
6            <ul class="nav-list">
7                <li><a href="" class="nav-link">home</li>
8                <li><a href="" class="nav-link">about</li>
9                <li><a href="" class="nav-link">access</li>
10                <li><a href="" class="nav-link">contact</li>
11            </ul>
12        </nav>
13      </header>
14
15
16```CSS
17ソースコード
18
19.header {
20  display: flex;
21  justify-content: space-between;
22  padding: 30px;
23  align-items: center;
24}
25
26.nav-list {
27  display: flex;
28}
29
30.nav-link {
31  margin-left: 20px;
32  font-size: 4vh;
33  color: #292929;
34}
35
36### 試したこと
37・display: flex;
38  justify-content: space-between;　を指定する要素の変更
39
40・親要素のwidthを指定し、margin-left: auto;
41
42・justify-content: flex-end;
43
44
45
46
47### 補足情報（FW/ツールのバージョンなど）
48macbookでVScode使ってます。
49なにをやっても動きがないのでお手上げで質問しました。

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

回答2件

ベストアンサー

ナビ内のaリンクの閉じタグがないのが原因ですね。このためにブラウザの自動補完機能でメニューのあとに余分なa要素が追加されてそれが空白の原因になってます。

aリンクの閉じタグをきちんと記述すればjustify-content: space-between;が効いて両端揃えになります。

html
1     <ul class="nav-list">
2        <li><a href="#1" class="nav-link">home</a></li>
3        <li><a href="#2" class="nav-link">about</a></li>
4        <li><a href="#3" class="nav-link">access</a></li>
5        <li><a href="#4" class="nav-link">contact</a></li>
6      </ul>

投稿2020/08/14 01:16

hatena19

総合スコア33715

退会済みユーザー

2020/08/14 03:43

自分では気づけなかったと思うのでありがとうございました！大変助かりました！

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

こちらでいかがでしょうか?

CSS
1.header {
2  display: flex;
3  
4  /* コメントアウト */
5  /* justify-content: space-between; */
6
7  padding: 30px;
8  align-items: center;
9}
10
11/* 追加 */
12.nav {
13  margin-left: auto;
14}