モニター表示の際、デバイスによってフォントサイズが変更される点を改善したい

コードをモニター表示した際に、13インチPCではフォントサイズが指定通りに表示されますが、
27インチ画面のchromeで表示させた時は、フォントサイズをはじめ、container幅など全体的に縮小されて
表示されます。
ただし、27インチPCでもsafariだと縮小されずに表示されました。
この縮小される点を、縮小されずに表示できるように改善したいです。

試してみたこととして、cssでのフォント設定remなどを確認してみましたが、
問題点がわかりませんでした。

以下、コードを添付しました。

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

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="images/index/画像画像画像.svg" alt="文章文章文章">
17            </div>
18        </div>
19        <header>
20            <div class="container header-flexbox">
21                <div><a href="index.html"><img class="header-logo" src="images/index/画像画像画像.svg" alt="文章文章文章"></a></div>
22                <nav>
23                    <ul class="nav-main">
24                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
25                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
26                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
27                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
28                    </ul>
29                </nav>
30            </div>
31        </header>
32        <article>
33            <div class="container">
34                <div class="message-text">
35                    <h1>タイトルが入りますタイトルが入ります</h1>
36                    <p>ダミーダミーダミー、</p><p>ダミーダミーダミー。</p>
37                </div>
38            </div>
39        </article>
40        <div class="activity-wrapper">
41            <div class="container service">
42                <div class="heading">
43                    <h2>ダミーダミーダミー</h2>
44                </div>
45                <section class="servicearea">
46                    <div class="category">
47                        <div class="rect-wrap">
48                            <div class="txt">
49                                <h3>見出しが入ります</h3>
50                                <p>
51                                    テキストが入ります。テキストが入ります。テキストが入ります。
52                                    テキストが入ります。テキストが入ります。テキストが入ります。
53                                    テキストが入ります。テキストが入ります。テキストが入ります。
54                                </p>
55                            </div>
56                        </div>
57                        <div class="pic">
58                            <img src="images/index/画像画像画像.jpg">
59                        </div>
60                    </div>
61                    <div class="category">
62                        <div class="rect-wrap">
63                            <div class="txt">
64                                <h3>見出しが入ります</h3>
65                                <p>
66                                    テキストが入ります。テキストが入ります。テキストが入ります。
67                                    テキストが入ります。テキストが入ります。テキストが入ります。
68                                    テキストが入ります。テキストが入ります。テキストが入ります。
69                                </p>
70                            </div>
71                        </div>
72                        <div class="pic">
73                            <img src="images/index/画像画像画像.jpg">
74                        </div>
75                    </div>
76                    <div class="category">
77                        <div class="rect-wrap">
78                            <div class="txt">
79                                <h3>見出しが入ります</h3>
80                                <p>
81                                    テキストが入ります。テキストが入ります。テキストが入ります。
82                                    テキストが入ります。テキストが入ります。テキストが入ります。
83                                    テキストが入ります。テキストが入ります。テキストが入ります。
84                                </p>
85                            </div>
86                        </div>
87                        <div class="pic">
88                            <img src="images/index/画像画像画像.jpg">
89                        </div>
90                    </div>
91                </section>
92            </div>
93        </div>
94        <footer>
95            <div class="container">
96                <div><a href="index.html"><img class="footer-logo" src="images/index/画像画像画像.svg" alt=""></a></div>
97                <p class="footer-txt">〒000-0000　ダミーダミーダミー0-0</p><p>ダミーダミーダミー：00:00-00:00｜ダミーダミーダミー00:00-00:00</p><p>ダミーダミーダミー</p>
98                <p class="copyright">&copy;ダミーダミーダミー 2021</p>
99            </div>
100        </footer>
101    </body>
102</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    max-width: 1170px;
20    width: 100%;
21    padding: 0 15px;
22    margin: 0 auto;
23    padding: 0 4%;
24}
25#top-wrapper {
26    min-height: 100vh;
27    background-image: url(../../images/index/画像画像画像.jpg);
28    background-size: cover;
29    background-position: center top;
30    background-repeat: no-repeat;
31}
32.top-logo {
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    width: 20%;
37    -webkit-transform: translate(-50%, -50%);
38    -moz-transform: translate(-50%, -50%);
39    transform: translate(-50%, -50%);
40    z-index: 100;
41}
42header {
43    height: 80px;
44    width: 100%;
45    background-color: #f7f7f7;
46}  
47.header-flexbox {
48    display: flex;
49    justify-content: space-between;
50}
51.header-logo {
52    width: 55px;
53    margin-top: 13px;
54}
55.nav-main {
56    display: flex;
57    list-style: none;
58    margin-top: 27px;
59    font-size: 1rem;
60    text-transform: uppercase;
61}
62.nav-main li {
63    margin-left: 70px;
64    letter-spacing: 5px;
65}
66.nav-main a { 
67    color: black;
68    position: relative;
69    display: inline-block;
70}
71.nav-main a::after {
72    position: absolute;
73    bottom: -10px;
74    left: 0;
75    content: '';
76    width: 100%;
77    height: 1px;
78    background: #333;
79    transform: scale(0, 1);
80    transform-origin: right top;
81    transition: transform .3s;
82}
83.nav-main a:hover::after {
84    transform-origin: left top;
85    transform: scale(1, 1);
86}
87article {
88    height: 1050px;
89    background-image: url(../../images/index/画像画像画像.jpg);
90    background-size: cover;
91    object-fit: cover;
92    display: flex;
93    justify-content: center;
94    padding-top: 90px;
95}
96.message-text {
97    color: black;
98    text-align: center;
99}
100.message-text h1 {
101    font-size: 26px;
102    letter-spacing: 5px;
103    font-weight: bold;
104    padding-bottom: 90px;
105}
106.message-text p {
107    font-size: 14px;
108    letter-spacing: 5px;
109    line-height: 2.5;
110    font-weight: normal;
111}
112.message-paddingTop {
113    padding-top: 40px;
114}
115.heading {
116    padding: 90px 0;
117    text-align: center;
118}
119.heading h2{
120    letter-spacing: 5px;
121    font-size: 16px;
122    font-weight: normal;
123    line-height: 2.5;
124    border-top: 1px solid #000;
125    border-bottom: 1px solid #000;
126    display: inline-block;
127}
128.category:not(:first-child) {
129    margin-top: 10rem;
130}
131.servicearea {
132    margin-top: 0px;
133}
134.category {
135    background: #fff;
136    display: flex;
137    align-items: center;
138    justify-content: flex-end;
139}
140.pic {
141    width: 77%;
142}
143.pic img {
144    width: 100%;
145    height: 500px;
146    object-fit: cover;
147}
148.rect-wrap {
149    width: 33%;
150    margin-right: -100px;
151    z-index: 1;
152}
153.txt {
154    padding: 1rem 2rem 2rem 2rem;
155    background-color: #f7f7f7;
156}
157.txt h3 {
158    font-size: 20px;
159    font-weight: bold;
160    border-bottom: 1px solid #000;
161    line-height: 3.5;
162    letter-spacing: 5px;
163}
164.txt p {
165    font-size: 14px;
166    padding-top: 22px;
167    line-height: 1.8;
168    letter-spacing: 5px;
169}
170.category:nth-child(2n) {
171    background: #fff;
172    display: flex;
173    align-items: center;
174    flex-direction: row-reverse;
175    justify-content: flex-start;
176}
177.category:nth-child(2n) .rect-wrap {
178    z-index: 1;
179    margin-left: -100px;
180}
181
182footer {
183    height: auto;
184    padding: 60px 0 30px 0;
185    text-align: center;
186    background-color: black;
187}
188footer p{
189    color: white;
190    line-height: 2.5;
191    font-size: 12px;
192    letter-spacing: 5px;
193}
194.footer-logo {
195    width: 120px; 
196    padding-bottom: 30px;
197}
198