headerが右寄せにならない

header全体を右寄せにしたいです
現状左に寄ってしまします。。。

HTML
1  <header class="header">
2    <div class="header-inner"> 
3      <nav class="header-nav">
4        <ul class="nav-list">
5          <li class="nav-item"><a href="#">top</a></li>
6          <li class="nav-item"><a href="#">design</a></li>
7          <li class="nav-item"><a href="#">about</a></li>
8          <li class="nav-item"><a href="#">skills</a></li>
9        </ul>
10      </nav>
11      <button class="burger-btn">
12        <span class="bar bar_top"></span>
13        <span class="bar bar_mid"></span>
14        <span class="bar bar_bottom"></span>
15      </button>
16    </div>
17  </header>

CSS
1.header{
2  padding: 19px 30px;
3  position: absolute;
4  top: 0;
5  left: 0;
6  z-index: 1;
7  box-sizing: border-box;
8  width: 100%;
9  transition: .3s;
10}
11.header-inner{
12  display: flex;
13  justify-content: space-between;
14  align-items: center;
15  max-width: 1200px;
16  margin: 0 auto;
17}
18.header a{
19  color: #fff;
20  text-decoration: none;
21  transition: .3s;
22  font-weight: lighter;
23}
24.header a:hover{
25  opacity: .7;
26  transition: .3s;
27}
28.nav-list{
29  display: flex;
30}
31.nav-item{
32  margin-right: 30px;
33}
34.nav-item:last-of-type{
35  margin-right: 0;
36}

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

回答1件

ベストアンサー

①CSSのファイルが読み込めてないかと思います。headの中に、

HTML
1<head>
2    <link rel="stylesheet" href="ファイル名">
3</head>

②head-innerのjustify-content:space-betweenをjustify-content:flex-end；に変えたら右寄りになるかと思います。

CSS
1.header-inner{
2    justify-content: flex-end;
3}

投稿2020/08/27 11:07

dreamland

総合スコア43

_arukuneko

2020/08/27 11:23

できました！！ありがとうございました！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

headerが右寄せにならない

関連した質問