html css でのflexboxの使い方について

HTML,CSSでflexboxの使い方について教えていただきたいのですが、ヘッダー部分のリストを右側に寄せて横並びにしたいのですが、float:rightを使わずにflexboxを使い右寄せ横並びにしたいです。　
調べながらflexを使ってみたのですが、ヘッダーリストがヘッダーの下にはみ出してしまいます。
どのようにしたら見本の画像のようにヘッダーリストを配置できるのでしょうか、初歩的な質問で申し訳ないですがよろしくお願いいたします。

見本の画像のfloatを使ってのＨＴＭＬ

    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        
        <div class="header-right">
          <span class="fa fa-bars menu-icon"></span>
          <a href="#">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
          
        </div>
      </div>
    </header>

見本の画像のfloatを使ってのcssコード

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  margin-right: -25px;
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
  float: left;
  transition: all 0.5s;
}

flexを使ってのコード　ＨＴＭＬ

<header>
  <div class="container">
    <div class="header-left">
      <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
    </div>
    <div class="header-right">
    <div class="header-list">
      <a href="#">レッスン</a>
      <a href="#">新規登録</a>
      <a href="#">ログイン</a>
    </div>
    </div>
  </div>
</header>

flexを使ってのコード CSS

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
}

.header-left {
  display: flex;
}

.logo {
  width: 124px;
  margin: 20px 30px;

}

.header-right {
  display: flex;
  justify-content: flex-end;
}

m.ts10806

2020/05/09 09:43

全ての人がProgateを利用するわけではありません。「現役のエンジニア」だとほとんど利用してないのではないでしょうか。いずれにしても何かしら自身で書いたコードと起きている問題を具体的に提示してください。タイトルもこのタイトルでは何も要件が分からないので、調整してください。質問は編集できます。

kei344

2020/05/10 17:21

（質問文は編集できます）ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

manachos

2020/05/11 01:54

質問へのご指摘ありがとうございました。質問の仕方を良く調べず質問してしまいました。今後は気を付けたいと思います。わからない箇所、コードなど詳しく載せたいと思います。

m.ts10806

2020/05/11 01:59

質問は編集できます。

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

回答2件

ベストアンサー

flexは親要素に指定します。

CSS
1.container {
2    display: flex;
3}
4.header-right {
5    align-self: center;
6    margin-left: auto;
7}
8```**動くサンプル：**[https://jsfiddle.net/m7kohfLt/](https://jsfiddle.net/m7kohfLt/)
9
10---
11
12【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
13[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
14
15【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
16[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
17
18【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
19[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)