displayflexで７個の長さの違うアイテムを並べた時、4つ目をセンターに配置したい。

実現したいこと

displayflexで７個の長さの違うアイテムを並べた時、4つ目をセンターに配置したい。
具体的にいうと、牛のロゴの下にごとう農園の＜と＞の文字がくるようにしたいです。

前提

ネットで中央よせを調べて
display flex
justify-content: center;
にしてみてもセンターにはならなかったです。

該当のソースコード

HTML

1 <header class="header"> 2 <div class="header__inner"> 3 <div class="header__ttl"> 4 <span>あなたは知ってる？</span><br class="blank"> 5 <span>蓼科を丸ごと味わう</span><br class="blank"> 6 <span>喜びを</span> 7 </div><!-- /.header__ttl --> 8 9 </div><!-- /.header-inner --> 10 11 </header><!-- /.header --> 12 <div class="down-header__inner"> 13 <h1 class="header__logo"> 14 <img class="header__logo_cow" src="img/logo-01.png" alt="蓼科ごとう農園のマスコットキャラクターの牛" width="96" height="93" 15 loading="lazy"> 16 </h1><!-- /.header__logo --> 17 </div><!-- /.down-header__inner --> 18 <!-- for PC --> 19 <nav id="gnav" class="gnav " aria-label="メインメニュー"> 20 <div class="gnav__inner"> 21 <ul class="gnav__list"> 22 <li class="gnav__item gnav__item1"><a href="#about" class="gnav__link">この農園について</a></li> 23 <li class="gnav__item gnav__item2"><a href="#product" class="gnav__link">製品一覧</a></li> 24 <li class="gnav__item gnav__item3"><a href="#news" class="gnav__link">お知らせ</a></li> 25 <li class="gnav__item__name"><a href="#top"><img class="header__logo_name logo_name" 26 src="img/logo-02.png" alt="蓼科ごとう農園" width="300" height="100" loading="lazy"></a></li> 27 <li class="gnav__item gnav__item4"><a href="#faq" class="gnav__link">FAQ</a></li> 28 <li class="gnav__item gnav__item5"><a href="#access" class="gnav__link">アクセス</a></li> 29 <li class="gnav__item gnav__item6"><a href="#contact" class="gnav__link">お問い合わせ</a></li> 30 </ul><!-- /.gnav__list --> 31 </div><!-- /.gnav__inner --> 32 33 </nav><!-- /.gnav -->

.down-header__inner { background: $c_bg; border-radius: 50%; width: 154px; height: 154px; padding: 30px; position: relative; top: -75px; left: 50%; transform: translateX(-50%); z-index: 1000; } .header__logo_cow { text-align: center; } .gnav { margin-top: -154px; background: $c_bg; height: 200px; } .gnav__inner { padding-left: 30px; padding-right: 30px; margin-left: auto; margin-right: auto; max-width: 1042px; } .gnav__list { padding-top: 60px; } .gnav__link { &:focus, &:hover { color: $c_btn; } } .gnav__item { display: none; } .header__logo_name { margin: 0 auto; } @include medium { .gnav { height: 300px; } .gnav__item { display: block; margin-left: 4%; &:nth-of-type(3) { margin-right: -4%; } &:first-child { margin-left: 0; } } .gnav__link { font-size: clamp(16px, 2.8vw, 14px); font-weight: 700; } .header__logo_name { text-align: center; margin-top: 60px; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); } .gnav__list { padding-top: 180px; position: relative; display: flex; align-items: center; justify-content: space-between; } } @include large { .gnav { height: 200px; } .gnav__item { display: block; margin-left: 4%; &:nth-of-type(3) { margin-right: 4%; } &:first-child { margin-left: 0; } } .gnav__item__name { text-align: center; } .header__logo_name { margin-top: 0px; position: static; transform: translateX(0); } .gnav__list { padding-top: 60px; display: flex; align-items: center; justify-content: center; } }

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。