【FlexBox】justify-content: flex-end;が適用されないです。

前提・実現したいこと

イメージ説明

FlexBoxを使って子要素を、親要素の右端に寄せたいです。

※子要素　<ul class="header-menu">
※親要素　<div class="header">

発生している問題・エラーメッセージ

エラーメッセージはありません。

該当のソースコード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>PAS-POL-旅のモノづくりブランド-|TABIPPO</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anosnymous"></script>
</head>
<body>
<div class="container-fluid p-0 m-0">



  <div class="row top m-0 p-0">

    <div class="header">
        <a  class="header-logo" href="#"><img src="https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/siteLogo-pc@2x.png"></a>

        <ul class="header-menu">
          <li>TOP</li>
          <li>PRODUCT</li>
          <li>ABOUT</li>
          <li>NEWS</li>
          <li>CONTACT</li>
        </ul>
    </div>

  <ul class="slick m-0 p-0">
    <li class="m-0 p-0"><img href="#" class="p-0 m-0" alt="画像1" src="https://images.unsplash.com/photo-1476673160081-cf065607f449?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" /></li>
    <li class="p-0 m-0"><img class="m-0 p-0" alt="画像2" src="https://images.unsplash.com/photo-1553570739-330b8db8a925?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" /></li>
    <li class="m-0 p-0"><img class="m-0 p-0" alt="画像3" src="https://images.unsplash.com/photo-1530053969600-caed2596d242?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" /></li>
  </ul>

</div>



</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS
.container-fluid{
    font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}


img{
    width:100%;
    height:700px;
    object-fit:cover;
}
button{
    display:none !important;
}
.top{
    position:relative;
}
.header{
    position:absolute;
    top: 40px;
    left:0;
    z-index: 1;
    display:flex;
}
.header-logo img{
    width:270px;
    height:100px;
    object-fit:contain;
    margin: 0 0 0 50px;
    background-color:black;
}
.header-menu{
    list-style:none;
   display:flex;
   justify-content: flex-end;
}
.header-menu li{
    color:white;

}