CSSのjustify-contentが適用されない

##CSSが適用されるようにしたい

display:flex;
は適用されているのに
justify-content: flex-end;
が適用されない。

理由はなぜでしょうか？
わかる方教えてください。

HTMLコード
<!DOCTYPE html>
<html>
<head>
  <mete charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="public/css/index.css">
</head>
<body>
<header>
 <div class="header-main">
   <div class="logo-left">
     <img src="public/img/top/logo.jpg" alt="">
   </div>
    <div class="header-right">
     <ul class="global-many">
       <li><a href="">TOP</a></li>
       <li><a href="">業務内容</a></li>
       <li> <a href="">問い合わせ</a></li>
       <li><a href="">お客様の声</a></li>
       <li><a href="">スタッフ紹介</a></li>
       <li><a href="">採用</a></li>
     </ul>
    </div>
  </div>
</header>
</body>
</html>

CSSコード
.header-main{
  display: flex;
}
.global-many {
display: flex;
justify-content: flex-end;
font-size: 30px;
list-style: none;
}
.global-many li{
  margin: 0 0 30px 30px;
}

itagagaki

2021/05/03 08:05

そのままCodePenにコピペしたらちゃんと右寄せになっているようですが、おかしいですか？ https://codepen.io/itagagaki/pen/gOgVGZr

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

回答1件

ベストアンサー

.header-main でjustify-content を設定していないので、初期値の flex-start（左寄せ）になっているので、子要素(logo-left, header-right)は左寄せになってます。そのため、header-right の中身を右寄せしても無意味になってます。
親要素にjustify-content: space-between;（両端揃え）を設定すればいいでしょう。

css
1.header-main{
2  display: flex;
3  justify-content: space-between; /* 追加 */
4}
5.global-many {
6  display: flex;
7/*  justify-content: flex-end; 不要 */
8  font-size: 30px;
9  list-style: none;
10}