文章を左づめにしたうえで、全体を中央に揃えるやり方を知りたい

下記のコードにて、reviewクラス内のpを左づめにしたうえで、
reviewクラスの真ん中に配置したいです。

試したこと：cssのreview pのtext-alignをleftにしてみましたが、
reviewクラスにおいても左づめになってしまいました。

お手数ですが、ご回答いただけると幸いです。
よろしくお願いいたします。

※完成図のワイヤーフレームを添付いたしました。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>タイトル</title>
6        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
7        <link rel="stylesheet" href="css/style.css">
8    </head>
9    <body>
10       <header>
11           <div class="container">
12               <div class="heading">
13                   <h2>タイトル</h2>
14               </div>
15           </div>
16       </header>
17        <div class="review-wrapper">
18           <div class="container main">
19              <div class="review">
20                  <img src="ダミーダミーダミー" alt="">
21                  <h3>ダミーダミーダミー</h3>
22                  <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
23              </div>
24               <div class="review">
25                   <img src="ダミーダミーダミー" alt="">
26                   <h3>ダミーダミーダミー</h3>
27                   <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
28               </div>
29               <div class="review">
30                   <img src="ダミーダミーダミー" alt="">
31                   <h3>ダミーダミーダミー</h3>
32                   <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
33               </div>
34               <div class="review">
35                   <img src="ダミーダミーダミー" alt="">
36                   <h3>ダミーダミーダミー</h3>
37                   <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
38               </div>
39           </div>
40        </div>
41    </body>
42</html>

css
1body {
2    margin: 0;
3    font-family: "Hiragino Kaku Gothic ProN";
4}
5a {
6    text-decoration: none;
7}
8.container {
9    width: 1170px;
10    padding: 0 15px;
11    margin: 0 auto;
12}
13header {
14    padding: 100px 0;
15}
16.heading h2 {
17    font-size: 16px;
18    letter-spacing: 5px;
19    text-align: center;
20}
21.review-wrapper {
22    padding-top: 50px;
23    text-align: center;
24}
25.main {
26    display: flex;
27    flex-wrap: wrap;
28    justify-content: space-between;
29}
30.review {
31    width: 25%;
32    height: 760px;
33    text-align: center;
34}
35.review img {
36    width: 80%;
37    height: 300px;
38    object-fit: cover;
39    padding-bottom: 10px;
40}
41.review h3 {
42    width: 80%;
43    font-size: 12px;
44    letter-spacing: 5px;
45    line-height: 2;
46    display: inline-block;
47}
48.review p {
49    font-size: 12px;
50    padding-top: 10px;
51    letter-spacing: 5px;
52    line-height: 2;
53    width: 80%;
54    display: inline-block;
55    text-align: center;
56}

行動規範の内容に同意します

回答1件

ベストアンサー

text-align: justify; でどうでしょう。

css
1.review p {
2  font-size: 12px;
3  padding-top: 10px;
4  letter-spacing: 5px;
5  line-height: 2;
6  width: 80%;
7  display: inline-block;
8  text-align:justify; /* */
9}