flexで中央寄せにしているのに、中央寄せにならない

flex conteinarで justify-content: center; align-items: center;　を指定しているのですが、flex itemが中央寄せにならなくて、困っています。

画像右上のメニューのところです。
2本線が左寄せになってしまい、何が原因なのか考えてもわからず、質問させていただきました。

勉強のためにも助けていただけたら、幸いです。
よろしくお願いいたします。

イメージ説明

/*html*/
  <body>
    <header class="header">
      <a href="#"><img src="../recipe/images/header/header_logo.svg" class="logo"></a>
      <button type="button" class="hamburger-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="button-menu">メニュー</span>
      </button>
      <ul class="hamburger-menu-list">
        <li class="recipe"><a href="#">レシピ</a></li>
        <li class="tokushu"><a href="#">特集</a></li>
        <li class="ranking"><a href="#">ランキング</a></li>
      </ul>


    </header>

/*css*/
@charset "utf-8";

body{
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.75;
  color:#333;
}

li{
  list-style:none;
}

a{
  color:#333;
  text-decoration:none;
}

img{
  width:100%;
  height: auto;
  vertical-align: bottom;
}

.header{
  position:fixed;
  top:0;
  width:100%;
  height: 60px;
  background-color: rgb(238,156,112,80%);
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding: 13px 20px 19px;
}

.logo{
  max-width: 269px;
}

.hamburger-botton{
  position: fixed;
  top:16px;
  right: 20px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bar{
  display: block;
  width:24px;
  height: 2px;
  background-color: #ffffff;
}

.bar:nth-child(1){
  margin-bottom: 8px;
}

.button-menu{
  font-size: 12px;
  color: #ffffff;
}

.hamburger-menu-list{
  position:fixed;
  top:60px;
}

回答1件

ベストアンサー

class名のスペルミスでしょうか？

diff
1- .hamburger-botton {
2+ .hamburger-button {
3    position: fixed;
4    top: 16px;
5    right: 20px;
6    display: flex;
7    flex-direction: column;
8    justify-content: center;
9    align-items: center;
10  }