flexbokで2列にした右側のかたまりを、文字を左に揃えて中央に配置したい

Question

前提・実現したいこと

flexbokで2列にした右側のかたまりを、文字を左に揃えて中央に配置したい（画面幅を広げた時に左側は固定で、右側が動くようにしたい）です。
どなたかご助言いただけると幸いです。

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

text-alignのcenter,leftを駆使してみましたが、どうしても文字まで中央揃えになってしまいます。

該当のソースコード

    <nav class="spmenu-inner-bottom2">
      <ul class="spmenu-inner-bottom-left">
      <li><a href="">工場見学</a></li>
      <li><a href="">企業情報</a></li>
      <li><a href="">美術館</a></li>
      </ul>
      <ul class="spmenu-inner-bottom-right">
      <li><a href="">ものづくり</a></li>
      <li><a href="">ホール</a></li>
      <li><a href="">地域情報</a></li>
    </ul>

.spmenu-inner-bottom2{
  margin: 50px 20px 20px 20px;
  display: flex;
}

.spmenu-inner-bottom-left{
  width: 200px;
}
.spmenu-inner-bottom-right{
  flex: 1;
}

.spmenu-inner-bottom-left a{
  display: inline-block;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 30px;
}
.spmenu-inner-bottom-right a{
  display: inline-block;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 30px;
}

Answer 1

現状のHTMLのままだと難しいので、右側のulをdivで囲みます。クラス名は、right-box とします。

<nav class="spmenu-inner-bottom2">
  <ul class="spmenu-inner-bottom-left">
    <li><a href="">工場見学</a></li>
    <li><a href="">企業情報</a></li>
    <li><a href="">美術館</a></li>
  </ul>
  <div class="right-box">
    <ul class="spmenu-inner-bottom-right">
      <li><a href="">ものづくり</a></li>
      <li><a href="">ホール</a></li>
      <li><a href="">地域情報</a></li>
    </ul>
  </div>
</nav>

right-box に flex を設定して子要素を中央寄せします。
子要素はインラインブロックにして幅を中身のテキストにあわせます。

.right-box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.spmenu-inner-bottom-right {
  display: inline-block;
}

Comments

[kgtsk]

うまくいきました。時間を割いていただき本当にありがとうございました。