letter-spacingで文字間隔を調整させたい

下記に添付したコード内で、message-wrapperの中の
heading、h2をletter-spacingを使って文字間の調整を行いたいのですが、
px数を変更しても変わりません。
font-sizeも変更できない状態ですが、h2をh1やpなどにすると
モニター表示時の文字の大きさは変わります。
なぜ、letter-spacingで調整ができないのか教えていただければ幸いです。

使用エディタ：Brackets

よろしくお願いいたします。

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        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="stylesheet" href="css/responsive.css">
12    </head>
13    <body>
14        <div id="top-wrapper">
15            <div class="container">
16                <img class="top-logo" src="ダミーダミーダミー" alt="トップイメージ">
17            </div>
18        </div>
19        <header>
20            <div class="container header-flexbox">
21                <div><a href="index.html"><img class="header-logo" src="ダミーダミーダミー" alt="ナビゲーションロゴ"></a></div>
22                <nav>
23                    <ul class="nav-main">
24                        <li><a href="#">ダミーダミーダミー</a></li>
25                        <li><a href="#">ダミーダミーダミー</a></li>
26                        <li><a href="#">ダミーダミーダミー</a></li>
27                        <li><a href="#">ダミーダミーダミー</a></li>
28                    </ul>
29                </nav>
30            </div>
31        </header>
32        <div class="message-wrapper">
33            <div class="container">
34               <div　class="heading">
35                   <h2>タイトルタイトルタイトル</h2><!-- ここのh2の文字間隔を調整したいです -->
36               </div>
37                <div class="message-text">
38                    <p>ダミーダミーダミー</p><p>ダミーダミーダミー</p><p class="message-paddingTop">ダミーダミーダミー</p><p>ダミーダミーダミー</p><p>ダミーダミーダミー</p><p class="message-paddingTop">ダミーダミーダミー</p><p>ダミーダミーダミー</p><p class="message-paddingTop">ダミーダミーダミー</p><p>ダミーダミーダミー</p><p>ダミーダミーダミー</p><p>ダミーダミーダミー</p>
39                </div>
40            </div>
41        </div>
42    </body>
43</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22    padding: 0 4%;
23}
24#top-wrapper {
25    min-height: 100vh;
26    background-image: url(ダミーダミーダミー);
27    background-size: cover;
28    background-position: center top;
29    background-repeat: no-repeat;
30}
31.top-logo {
32    position: absolute;
33    top: 50%;
34    left: 50%;
35    width: 20%;
36    -webkit-transform: translate(-50%, -50%);
37    -moz-transform: translate(-50%, -50%);
38    transform: translate(-50%, -50%);
39    z-index: 100;
40}
41header {
42    height: 80px;
43    width: 100%;
44    background-color: #f7f7f7;
45    position: sticky;
46    top: 0;
47}  
48.header-flexbox {
49    display: flex;
50    justify-content: space-between;
51}
52.header-logo {
53    width: 55px;
54    margin-top: 13px;
55}
56.nav-main {
57    display: flex;
58    list-style: none;
59    margin-top: 27px;
60    font-size: 1rem;
61    text-transform: uppercase;
62}
63.nav-main li {
64    margin-left: 70px;
65    letter-spacing: 5px;
66}
67.nav-main a { 
68    color: black;
69    position: relative;
70    display: inline-block;
71}
72.nav-main a::after {
73    position: absolute;
74    bottom: -10px;
75    left: 0;
76    content: '';
77    width: 100%;
78    height: 1px;
79    background: #333;
80    transform: scale(0, 1);
81    transform-origin: right top;
82    transition: transform .3s;
83}
84.nav-main a:hover::after {
85    transform-origin: left top;
86    transform: scale(1, 1);
87}
88.message-wrapper {
89    background-image: url(ダミーダミーダミー);
90    background-size: cover;
91    object-fit: cover;
92    padding-top: 90px;
93    text-align: center;
94}
95.message-text {
96    padding-top: 50px;
97}
98.heading h2 { /*このh2の文字間隔を調整させたいです*/
99    font-size: 26px;
100    font-weight: bold;
101    letter-spacing: 5px;
102    font-weight: bold;
103    padding-bottom: 90px;
104}
105.message-text p {
106    font-size: 14px;
107    letter-spacing: 5px;
108    line-height: 2.5;
109    font-weight: normal;
110}
111.message-paddingTop {
112    padding-top: 40px;
113}