ol要素の番号とリスト項目が離れてしまう

前提

Webページにリストを表示させています。
ですが、ol要素の番号とリスト項目が離れてしまい、理想通りの表示にならず困っています。

単純な間違いだとは思うのですが、知識不足のため分かりません。
恐れ入りますが、どなたかご教授お願いいたします。

実現したいこと

以下の画像
INDEXのol要素の番号とリスト項目部分の間隔を

このように縮めたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>模写コーディング３</title>
8    <meta name="description" content="text text text text text">
9    <link rel="stylesheet" href="./assets/style.css">
10</head>
11<body>
12
13 <div class="container">
14   
15    <header class="headder">
16       <a href="index.html"><img class="headder-logo" src="./assets/img/logo.svg" alt="logo"></a>
17    </header>
18
19    <main class="main">
20       <div class="mainvisual">
21        <img src="./assets/img/mainvisual.jpg" alt="mainvisual">
22       </div>
23
24      <div class="inner">
25        
26        <section class="wrapper">
27          <h1 class="inner-title">INDEX</h1>
28          <div class="content">
29            <ol>
30                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
31                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
32                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
33                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
34                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
35            </ol>
36          </div>
37         </section>
38      
39 
40        <section class="work-wrapper">  
41            <ul>
42                <li><img src="./assets/img/photo1.jpg" alt="photo1"></li>
43                <li><img src="./assets/img/photo2.jpg" alt="photo2"></li>
44                <li><img src="./assets/img/photo3.jpg" alt="photo3"></li>
45                <li><img src="./assets/img/photo4.jpg" alt="photo4"></li>
46            </ul>
47        </section>
48
49        <section class="wrapper">
50            <h1 class="inner-title">DETAIL</h1>
51          <div class="detail">
52            <div class="detail-content">
53                <dl>
54                    <dt>
55                        著者：
56                    </dt>
57                    <dd>
58                        タイトルタイトルタイトル
59                    </dd>
60
61                    <dt>
62                        出版社：
63                    </dt>
64                    <dd>
65                        タイトルタイトルタイトル
66                    </dd>
67
68                    <dt>
69                        発行年：
70                    </dt>
71                    <dd>
72                        ２０２１年１月１日
73                    </dd>
74                
75            
76            
77            </div>
78
79            <div class="text">
80                <p class="first-text">
81                    テキストテキストテキストテキストテキストテキストテキストテキスト<br>
82                    テキストテキストテキストテキスト
83                </p>
84
85                <p class="second-text">
86                    テキストテキストテキストテキストテキストテキストテキストテキスト<br>
87                    テキストテキストテキストテキスト
88                </p>
89
90                <a href="index.html" class="link">オンラインストアで見る</a>
91            </div>
92          </div>
93        </section>
94      
95         </div>
96    </main>
97
98    <footer class="footer">
99        <p>&copy 2021 PHOTO BOOK 2</p>
100    </footer>
101
102 </div>
103
104</body>
105</html>
106
107

css
1@charset "UTF-8";
2/*----------全体------------*/
3html {
4    font-size: 100%;
5}
6
7* {
8    margin: 0;
9   
10}
11
12
13.container {
14     max-width: 1000px;
15     margin: 0 auto;
16}
17
18.inner {
19    max-width: 800px;
20    margin: 0 auto;
21    text-align: center;
22   
23}
24
25.wrapper {
26   margin-top: 100px;
27   background-color: rgb(221, 218, 218);
28   padding: 50px 0 50px 0;
29}
30.inner-title {
31  font-size: 1.6rem;
32  font-weight: bold;
33}
34
35.content {
36    border: 1px solid #000;
37    margin: 60px;
38    padding: 30px 0;
39}
40
41-------省略---------------------
42
43/*---------index--------*/
44
45.content ol {
46   
47}
48
49.content li {
50   font-size: 0.8rem;
51   padding-top: 10px;
52   
53}
54
55-------省略---------------------

試したこと

・.content li {
font-size: 0.8rem;
padding-top: 10px;
text-align: left; /追加/
}
番号との間の空白は解消されますが、全体が左寄せになってしまいます。

その後、
.content ol {
text-align: center;
}
などいくつか試してみましたが、変化ありません。

・.content ol {
text-align: right;
}
変化なしでした。

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

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

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

回答2件

ベストアンサー

text-align: center; でテキストを中央寄せしているのが原因ですね。

list-style-position: inside;で番号とテキストの隙間はなくなりますが、リスト項目のテキスト長が同じとは限らないと思いますので、その場合、番号の位置が揃わなくなります。

番号の位置を揃えて、全体を中央寄せしたいなら、Flexレイアウトを使うといいでしょう。

css
1/*---------index--------*/
2.content {
3  display: flex;
4  justify-content: center;
5}
6.content ol {
7  padding-left: 20px;
8}
9.content li {
10  font-size: 0.8rem;
11  padding-top: 10px;
12  text-align: left;
13}