一つだけ中央揃えにならない

前提・実現したいこと

画像のように中央揃えにしたいです。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="reconnect" href="https://fonts.gstatic.com">
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet" href="css/style.css">
9  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
10
11  <title>NaotoPortfolio</title>
12
13
14
15</head>
16<body>
17  <header class="header">
18    <ul class="header__nav">
19      <li class="header__nav--item">Concept</li>
20      <li class="header__nav--item">Service</li>
21      <li class="header__nav--item">Work </li>
22      <li class="header__nav--item">About</li>
23      <li class="header__nav--item">Contact</li>
24    </ul>
25    </div>
26    <div class="header__main">
27      <h1>Portfolio</h1>
28      <h2>Web engineer</h2>
29    </div>
30    </div>
31  </header>
32  <div class="consept">
33    <h4 class="consept__title">PRINCIPLE</h4>
34    <h4 class="consept__sub-title">方針・コンセプト</h4>
35  </div>
36  <div class="consept__article">
37    <h5>HTML&CSS・WordPress・JavaScriptなどを使用してWebサイトの設計からコーディングまで対応しているWebエンジニアです。
38      レスポンシブ対応(スマートフォン)も対応しております。お客様がお持ちの大切な思いを閲覧者様にわかりやすく伝えることお客様の意図を理解しようと努力し、閲覧者様に納得していただけるものを作ることをコンセプトとしており、出会った全てのお客様に幸せになってもらうことを第一にしています。私はいままで、たくさんの人に助けてもらいながら生きてきました。なんの見返りもないのに助けてくれた人も居ました。だからこそ、「人の役に立ちたい」「お客様、利用者様両方を幸せになって頂きたい」<br>
39      <pre>                                                              この幸せの連鎖をつなぐため、私はこの仕事をしています。</pre>
40    </h5>
41    <div class="consept__guide">
42      <h6>Webに関するご相談であれば、お気軽にご連絡ください。</h6>
43    </div>
44    <div class="btn">
45      <a href="#" class="btn-animation-02"><span>お問い合わせ</span></a>
46    </div>
47    <div class="service">
48      <div class="service__main">
49        <h4 class="service__main__title">SERVICE</h4>
50        <h4 class="service__main__sub--title">サービス内容</h4>
51        <div class="service__inner">
52              <div class="service__inner--logo"><img src="img/118361.png" alt=""></div>
53              <div class="service__inner--logo"><img src="img/—Pngtree—coding on screen glyph black_3755344.png" alt=""></div>
54              <div class="service__inner--logo"><img src="" alt=""></div>
55            <div class="service__articel"></div>
56          </div>
57        </div>
58      </div>
59    </div>
60</body>
61</html>
62
63```scss
64コード
65```SCSS
66// 変数
67$m-c: #292424;
68$s-c: #87D3C7;
69
70$t-s: 50px;
71$s-s: 27px;
72$a-s: 20px;
73
74//フォント
75
76* {
77  margin: 0;
78  padding: 0;
79}
80
81//img
82img {
83  max-width: 100%;
84  height: auto;
85}
86
87//title
88section {
89  &__title {
90    display: inline-block;
91    text-align: center;
92    font-size: 50px;
93    font-weight: bold;
94    margin-top: 95px;
95    margin-left: auto;
96    margin-right: auto;
97    font-family: "游ゴシック体", sans-serif;
98
99    @media screen and(min-width:375px) {
100      margin-top: 48px;
101      font-size: 18px;
102    }
103  }
104
105  &__sub--title {
106    display: block;
107    text-align: center;
108    font-size: 27px;
109    margin-right: auto;
110    margin-left: auto;
111    margin-top: 155px;
112    font-family: "游ゴシック体", sans-serif;
113
114    @media screen and(min-width:375px) {
115      margin: 79px;
116      font-size: 12px;
117    }
118  }
119}
120
121//コーディング
122
123.header {
124  background: url(../img/moss-5803607_1920.jpg);
125  background-size: cover;
126  height: 890px;
127
128  &__nav {
129    display: flex;
130    justify-content: flex-end;
131    padding-right: 98px;
132
133    &--item {
134      padding-top: 50px;
135      color: #FFFFFF;
136      font-size: 16px;
137      margin-right: 30px;
138      font-weight: bold;
139      font-family: "源ノ角ゴシック JP", sans-serif;
140
141    }
142  }
143
144  &__main {
145    h1 {
146      font-size: 139px;
147      font-family: "Bradley Hand", sans-serif;
148      color: #FFFFFF;
149      text-align: center;
150      margin-top: 180px;
151    }
152
153    h2 {
154      font-size: 44px;
155      font-family: "Bradley Hand",
156        sans-serif;
157      color: #FFFFFF;
158      text-align: center;
159      padding-top: 30px;
160    }
161  }
162}
163
164.consept {
165  text-align: center;
166  margin: 0auto;
167
168  &__title {
169    display: inline-block;
170    text-align: center;
171    font-size: 50px;
172    font-weight: bold;
173    margin-top: 76px;
174    color: #292424;
175    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif;
176  }
177
178  &__sub-title {
179    display: block;
180    text-align: center;
181    font-size: 25px;
182    margin-top: 10px;
183    font-weight: bold;
184    color: #292424;
185    font-family: "游ゴシック Medium",
186      "Yu Gothic Medium",
187      "游ゴシック体",
188      "YuGothic",
189      sans-serif;
190  }
191
192  &__article {
193    font-size: 24px;
194    line-height: 60px;
195    text-align: left;
196    margin-left: auto;
197    margin-right: auto;
198    color: #292424;
199    width: 1180px;
200    padding-top: 40px;
201    font-family: "游ゴシック Medium",
202      "Yu Gothic Medium",
203      "游ゴシック体",
204      "YuGothic",
205      sans-serif;
206  }
207
208  &__guide {
209    font-family: "游ゴシック Medium",
210      "Yu Gothic Medium",
211      "游ゴシック体",
212      "YuGothic",
213      sans-serif;
214    font-weight: bold;
215    font-size: 35px;
216    text-align: left;
217    color: #292424;
218    text-align: center;
219    margin-right: auto;
220
221    margin-top: 100px;
222    margin-bottom: 86px;
223  }
224}
225
226.btn {
227  text-align: center;
228
229  .btn-animation-02 {
230    display: inline-block;
231    width: 227px;
232    text-align: center;
233    background-color: #fff;
234    border: 2px solid #87D3C7;
235    font-size: 21px;
236    color: #fff;
237    text-decoration: none;
238    padding: 10px 24px;
239    border-radius: 4px;
240    position: relative;
241    line-height: 50px;
242    font-family: "Hiragino Maru Gothic ProN";
243
244  }
245
246  .btn-animation-02 span {
247    position: relative;
248    z-index: 1;
249  }
250
251  .btn-animation-02::before,
252  .btn-animation-02::after {
253    content: "";
254    display: block;
255    background-color: #87D3C7;
256    width: 50%;
257    height: 100%;
258    position: absolute;
259    top: 0;
260    transition: .2s;
261  }
262
263  .btn-animation-02::before {
264    left: 0;
265  }
266
267  .btn-animation-02::after {
268    right: 0;
269  }
270
271  .btn-animation-02:hover:before,
272  .btn-animation-02:hover:after {
273    width: 0;
274    background-color: #87D3C7;
275  }
276
277  .btn-animation-02:hover {
278    color: #87D3C7;
279  }
280}
281
282.service {
283
284  &__main {
285    background-color: #87D3C7;
286    width: 100%;
287    height: 800px;
288    position: absolute;
289    left: 0;
290    margin-top: 85px;
291
292    &__title {
293      text-align: center;
294      font-size: 50px;
295      font-weight: bold;
296      margin-top: 95px;
297      margin-left: auto;
298      margin-right: auto;
299      color: #fff;
300      font-family: "游ゴシック体", sans-serif;
301    }
302
303    &__sub--title {
304      text-align: center;
305      font-size: 27px;
306      margin-right: auto;
307      margin-left: auto;
308      margin-top: 10px;
309      color: #fff;
310      font-weight: bold;
311      font-family: "游ゴシック体", sans-serif;
312    }
313  }
314
315  &__inner {
316    text-align: center;
317
318    &--logo {
319      display: inline-block;
320      width: 226px;
321      height: 226px;
322      background: #f1f9ff;
323      border-radius: 50%;
324      margin-right: 100px;
325      margin-left: 100px;
326      margin-top: 40px;
327    }
328  }
329}
330
331コード