Google develop toolの使い方と見方について

Google develop toolの下記のみかた（paddingが反映されない）について
わからないため、質問します。

Q.
padding-left: 22px;
padding-right: 22px;
が適用されない原因について知りたいのですが、
この画像から推測できないため、教えていただけると幸いです。

前提・実現したいこと

Google develop toolの下記の画像

CSS
1.middle-line{
2              padding-left: 22px;
3              padding-right: 22px;
4                }

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

      padding-left: 22px;
      padding-right: 22px;
が適用されない！！！

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
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="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
9    <link rel="stylesheet" href="./css/destyle.css">
10    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
11    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
12    <!--flatpicker-->
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
14    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
15    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
16  
17    <link rel="stylesheet" href="./css/style.css">
18    
19</head>
20<body>
21<section class="history">
22            <div class="inner hs-theme">
23                <div class="hs-flex">
24                    <p class="hs-ttl">温 海 温 泉 の <br class="hs-ttl2"> 美 し さ に 癒 や さ れ て</p><!-- /.hs-ttl -->
25                    <ul class="hs-list">
26                        <li class="hs-item">東 北 の 奥 座 敷 で あ る 温 海 温 泉 郷 <br class="middle-line"> 開 湯 は 約 1 3 0 0 年 前 と さ れ 、 役 小 角が <br> 発 見 し た と 伝 え ら れ ま す</li><!-- /.hs-item -->
27                        <li class="hs-item">石 井 花 壇 は 江 戸 よ り 続 く 由 緒 あ る 旅 館で <br class="middle-line"> ク ラ シ ッ ク な 作 り の 中 に 大 正 ロ マ ン あ ふ れる <br> 内 装 を 残 し て お り ま す</li><!-- /.hs-item -->
28                        <li class="hs-item">圧 倒 的 癒 や し の 空 間 で <br class="middle-line"> 頑 張 る 現 代 人 に <br> 頑 張 ら な い 圧 倒 的 な 非 日 常 を ご 提 供 し ま す</li><!-- /.hs-item -->
29                    </ul><!-- /.hs-list -->
30                    <p class="shop-name">石 井 花 壇</p><!-- /.shop-name 22 -->
31                </div><!-- /.hs-flex -->
32            </div><!-- /.inner -->
33        </section><!-- /.history -->
34 <script src="js/jquery-3.6.0.min.js"></script>
35    <script type="text/javascript" src="js/slick.min.js"></script>
36    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
37      <!-- 日本語の言語ファイル -->
38      <script>flatpickr("#flatpickr", {locale:"ja"});</script>
39    <script src="js/script.js"></script>
40    
41</body>
42</html>

CSS
1
2.history .hs-flex {
3  display: -webkit-box;
4  display: -webkit-flex;
5  display: -ms-flexbox;
6  display: flex;
7  -webkit-box-orient: horizontal;
8  -webkit-box-direction: reverse;
9  -webkit-flex-direction: row-reverse;
10      -ms-flex-direction: row-reverse;
11          flex-direction: row-reverse;
12  -webkit-justify-content: space-around;
13      -ms-flex-pack: distribute;
14          justify-content: space-around;
15  -webkit-box-align: center;
16  -webkit-align-items: center;
17      -ms-flex-align: center;
18          align-items: center;
19  padding-top: 150px;
20  padding-bottom: 70px;
21  margin: 0 auto;
22}
23
24.history .hs-flex .hs-ttl {
25  display: block;
26  -webkit-writing-mode: vertical-rl;
27      -ms-writing-mode: tb-rl;
28          writing-mode: vertical-rl;
29  font-size: 2.8rem;
30  /* padding-top: 64px;
31            padding-left: 900px; */
32}
33
34.history .hs-flex .hs-ttl2 {
35  display: block;
36  -webkit-writing-mode: vertical-rl;
37      -ms-writing-mode: tb-rl;
38          writing-mode: vertical-rl;
39  font-size: 2.8rem;
40  /*  padding-top: 149px;
41            padding-right: 33px; */
42}
43
44.history .hs-flex .hs-list {
45  -webkit-writing-mode: vertical-rl;
46      -ms-writing-mode: tb-rl;
47          writing-mode: vertical-rl;
48}
49
50.history .hs-flex .hs-list .hs-item {
51  -webkit-writing-mode: vertical-rl;
52      -ms-writing-mode: tb-rl;
53          writing-mode: vertical-rl;
54  /*  padding-top: 150px; */
55  padding-right: 118px;
56  font-size: 1.8rem;
57}
58
59.history .hs-flex .hs-list .hs-item .middle-line {
60  padding-left: 22px;
61  padding-right: 22px;
62}

Js
1//modarl winodw
2$(function(){
3  $('#js-modal').click(function(){
4    $('#js-form').fadeIn();
5  
6    });
7});
8
9
10//Fv slider
11$(function(){
12    $('.slider').slick({
13        autoplay: true,
14        autoplaySpeed: 2000,
15        fade: true,
16        speed: 1000,
17        cssEase: 'linear'
18        });
19    });
20
21//aos
22$(function(){
23    AOS.init({
24      duration: 2000,
25    })
26  });
27