レスポンシブ対応したheaderの作成

Question

bootstrap等を用いてレスポンシブ対応したheaderを作成しておりますが、なかなか上手くいきません。
画像の様なheaderを作成したいのですが、どなたかご教授頂けませんでしょうか？

1398pxは無視して頂いて、1140pxでお願い致します。

<header>
    <div class="container header-container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#"><img src="img/img.png" alt="imgロゴ"></a>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">AAA</a>
              <span class="header-span">aaa</span>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">BBB</a>
              <span class="header-span">bbb</span>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">CCC</a>
              <span class="header-span">ccc</span>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">DDD</a>
              <span class="header-span">ddd</span>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">EEE</a>
              <span class="header-span">eee</span>
            </li>
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">FFF</a>
              <span class="header-span">fff</span>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Language</a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <li><a class="dropdown-item" href="#">English</a></li>
                <li><a class="dropdown-item" href="#">Japanese</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

header{
  width: 100%;
  background-color: #343333;
  height: 100px;
}
.header-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap:
}
.nav-link{
  color: #fff;
}
.header-span{
  color: #fff;
}

Comments

[m.ts10806]

質問ではなく作業依頼になっています。
自身が調べたこと試したこと、そのうえで「何がどううまくいかないのか」「何を解決したいのか」スポット的な内容にした方が良いです。