デベロッパーツールでSPサイズ(W:375px)を指定して、コーディングしたい

前提・実現したいこと

■やっていること
現在、模写コーディンを行っており
下記サイト(蒼乃建設)を模写しております。
(https://danblog.tokyo/)

■やりたいこと
コーディングする際にSPサイズからコーディングするため
Googleデベロッパーツールでサイズを指定(375px)して
コーディングしたい

■問題
Googleデベロッパーツールでサイズを指定(375px) orドラッグでサイズ変更すると
cssにコーディングした内容と異なる表示になります。
例：width:100%指定した場所がデベロッパーツール上でだけ半分のサイズで表示される
※ブラウザの表示ではコーディングした内容で表示されます

■具体的な症状
・ブラウザ画面でサイズを変更した場合

・Googleデベロッパーツールでサイズを変更した場合

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

エラーメッセージ

該当のソースコード

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    <!-- リセットcss -->
9    <link rel="stylesheet" href="css/destyle.css">
10    <!-- css -->
11    <link rel="stylesheet" href="css/style.css">
12</head>
13
14<body class="body_wrapper">
15
16    <!-- header -->
17    <header class="header_wrapper">
18        <div class="header_wrapper__top">
19            <h1 class="site_title">
20                <a href="index.html"><img src="img/header_logo.png" alt="蒼乃建設"></a>
21            </h1>
22
23            <!-- ハンバーガー -->
24            <div class="hamburger">
25                <span></span>
26                <span></span>
27                <span></span>
28              </div>
29
30            <!-- ナビ -->
31            <nav class="gnav">
32                <ul class="gnavi__list">
33                    <li class="gnavi__item"><a href="#">企業理念</a></li>
34                    <li class="gnavi__item"><a href="#">施工事例</a></li>
35                    <li class="gnavi__item"><a href="#">採用情報</a></li>
36                    <li class="gnavi__item"><a href="#">お問い合わせ</a></li>
37                </ul>
38            </nav><!-- /gnav -->
39        </div><!-- /header_wrapper__top -->
40
41        <h2 class="mv_title">街を作る。未来を作る。</h2>
42    </header><!-- /header_wrapper -->
43
44    <!-- main -->
45    <main class="main_wrapper">
46
47        <!-- お知らせ -->
48        <section class="news">
49            <h3 class="news__title">お知らせ</h3>
50
51            <ul class="news__list">
52                <li class="news__item">
53                    <p>2020.11.17 お知らせ本社打合せ室が完成しました。</p>
54                </li>
55                <li class="news__item">
56                    <p>2020.11.10 お知らせ【メディア掲載】住宅雑誌 2020年11月号</p>
57                </li>
58                <li class="news__item">
59                    <p>2020.11.01お知らせホームページが完成しました。</p>
60                </li>
61            </ul>
62        </section><!-- /news -->
63
64        <!-- 施工事例 -->
65        <section class="case">
66            <h3 class="news__title">施工事例</h3>
67
68            <article class="case_content">
69                <div class="case_content__img">
70                    <img src="img/building1.png" alt="夕焼けの背景に青い屋根の大きな白い家">
71                </div>
72                    <h4 class="case_content__title">M様邸新築工事</h4>
73                    <p>埼玉県</p>
74                    <p>詳細を見る</p>
75            </article><!-- /case_content -->
76
77            <article class="case_content">
78                <div class="case_content__img">
79                    <img src="img/building2.png" alt="ガラス張りのオフィスビル">
80                </div>
81                    <h4 class="case_content__title">スカイビル</h4>
82                    <p>東京都</p>
83                    <p>詳細を見る</p>
84
85            <p><a href="#">施工実績一覧</a></p>
86            </article><!-- /case_content -->
87        </section><!-- /case -->
88    </main><!-- main_wrapper -->
89
90    <div class="contact_wrapper">
91        <ul class="contact_wrapper__list">   
92            <li class="contact_wrapper__item">
93                <a href="#"><h3>企業理念</h3></a>
94            </li>
95        
96            <li class="contact_wrapper__item">
97                <a href="#"><h3>企業理念</h3></a>
98            </li>
99        
100            <li class="contact_wrapper__item">
101                <a href="#"><h3>企業理念</h3></a>
102            </li>
103        </ul><!-- /contact_wrapper__list -->
104    </div><!-- /contact_wrapper -->
105
106    <footer class="footer">
107        <div class="footer__wrapper">
108            <h3 class="footer__wrappwer__title"><a href="#"><img src="img/footer_logo.png" alt="蒼乃建設"></a></h3>
109
110            <nav class="footer_nav">
111                <ul class="footer_nav__list">
112                    <li class="footer_nav__item"><a href="#">企業理念</a></li>
113                    <li class="footer_nav__item"><a href="#">施工事例</a></li>
114                    <li class="footer_nav__item"><a href="#">採用情報</a></li>
115                    <li class="footer_nav__item"><a href="#">お問い合わせ</a></li>
116                </ul>
117            </nav>
118        </div><!-- /footer__wrapper -->
119
120        <p class="footer__text"><small>Copyright &copy; 2020 Aono Corporation.</small></p>
121
122    </footer>
123
124
125
126
127</body><!-- /body_wrapper -->
128</html>

該当のソースコード

css
1@charset "uft-8";
2
3
4
5/* ---------------- */
6/* header */
7/* ---------------- */
8
9.header_wrapper {
10    margin: 0;
11    position: relative;
12    background-image: url(../img/main.png);
13    background-repeat: no-repeat;
14    background-size: cover;
15    background-position: center;
16    height: 50vh;
17    width: 100vw;
18
19}
20
21.header_wrapper__top {
22    display: flex;
23    justify-content: space-between;
24    padding: 15px 20px;
25}
26
27.site_title img {
28    height: 30px;
29}
30
31.hamburger{
32    position: fixed;
33    z-index : 3;
34    right : 13px;
35    top   : 12px;
36    width : 42px;
37    height: 42px;
38    cursor: pointer;
39    text-align: center;
40}
41.hamburger span {
42    display : block;
43    position: absolute;
44    width   : 30px;
45    height  : 2px ;
46    left    : 6px;
47    background : #555;
48    -webkit-transition: 0.3s ease-in-out;
49    -moz-transition   : 0.3s ease-in-out;
50    transition        : 0.3s ease-in-out;
51  }
52  .hamburger span:nth-child(1) {
53    top: 10px;
54  }
55  .hamburger span:nth-child(2) {
56    top: 20px;
57  }
58  .hamburger span:nth-child(3) {
59    top: 30px;
60  }
61
62
63.gnav {
64    display: none;
65}
66
67.mv_title {
68    position: absolute;
69    width: 100%;
70    text-align: center;
71    top: 50%;
72}