div,ul,liの移動の仕方

Question

前提・実現したいこと

class=""date"と"title"を横並びの状態にしながら画面の真ん中へもっていくにはどうしたらよいのでしょうか？
すべてのリストの頭の部分を、揃えた状態で真ん中に持っていきたいです。

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

class="date"と"title"を真ん中に持っていけない

該当のソースコード

-HTML--------------------------------------
<div>
 <ul class="newall">
        <a class="titlebar" href="#">
          <li class="newlist">
            <p class="date">2021.4/1</p>&nbsp;&nbsp;&nbsp;&nbsp;
            <p class="title">タイトル</p>
          </li>
        </a>
        <a class="titlebar" href="#">
          <li class="newlist">
            <p class="date">2021.4/1</p>&nbsp;&nbsp;&nbsp;&nbsp;
            <p class="title">タイトル</p>
          </li>
        </a>
        <a class="titlebar" href="#">
          <li class="newlist">
            <p class="date">2021.4/1</p>&nbsp;&nbsp;&nbsp;&nbsp;
            <p class="title">タイトル</p>
          </li>
        </a>
      </ul>
    </div>

-CSS---------------------------------------------------------
.titlebar {
  text-decoration: none;
}
.titlebar p {
  color: #000;
}
.newlist {
  display: flex;
}
.date {
  font-family: 'Kiwi Maru', serif;
}
.title {
  font-family: 'Kiwi Maru', serif;
}

試したこと

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

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

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

Answer 1

回答の前に、まず、ul の直下の子に a要素を置くのは文法違反です。

<ul>: 順序なしリスト要素 - HTML: HyperText Markup Language | MDN

許可されている内容 0個以上の <li>, <script>, <template> 要素。

a要素はli要素の中にいれましょう。
あと、要素間の余白調整に   を使うのは良い方法とはいえませんので、これも削除します。

これらを考慮するとHTMLは下記になります。

<div>
  <ul class="newall">
    <li class="newlist">
      <a class="titlebar" href="#">
        <p class="date">2021.4/1</p>
        <p class="title">タイトル</p>
      </a>
    </li>
    <li class="newlist">
      <a class="titlebar" href="#">
        <p class="date">2021.4/1</p>
        <p class="title">タイトル</p>
      </a>
    </li>
    <li class="newlist">
      <a class="titlebar" href="#">
        <p class="date">2021.4/1</p>
        <p class="title">タイトル</p>
      </a>
    </li>
  </ul>
</div>

そのうえで、CSSを下記のようにするといいでしょう。

.newall {
  list-style: none; 
}
.titlebar {
  display: flex;
  justify-content: center; /* 左右中央寄せ */
  text-decoration: none;
}
.titlebar p {
  color: #000;
}
.date {
  font-family: 'Kiwi Maru', serif;
  margin-right: 50px;
}
.title {
  font-family: 'Kiwi Maru', serif;
}

Answer 2

justify-contentを使うと、flexbox内のアイテムを左右中央寄せさせることができます。

.newlist {
  display: flex;
  justify-content: center; /*追加*/
}