検証ツールを開くと、ヘッダー幅が画面サイズより広くなる

前提

デザインカンプからのコーディングを行っています。
通常の画面では問題ないのですが、検証ツールを開くと、画面サイズ＜ヘッダー幅となってしまいます。
headerにwidth:100%は指定しています。

header内の要素の幅
・インナー幅→max-widthで1020px
インナーの中を①left②middle③rightの3つに分けており、
・left→240px
・middle→298px
・right→155px
で合計が693pxとなっています。

実現したいこと

ヘッダーを画面幅に収める(検証ツール使用時)

発生している問題

画面幅よりヘッダー幅が広くなっている

該当のソースコード

HTML
1<header>
2        <div class="header-inner">
3            <div class="header-left">
4                <h1><a href="#" class="flex-row">
5                        <img class="vertical-middle" src="images/Pink and Purple Events & party Entertainment Logo.png"
6                            alt="logo">
7                        <p class="vertical-middle">ユアコーディング</p>
8                    </a></h1>
9            </div>
10            <!-- .header-left -->
11            <div class="header-middle flex-row vertical-middle">
12                <a href="#FEATURES">特徴</a>
13                <a href="#PRICE">価格</a>
14                <a href="#CONTACT">お問い合わせ</a>
15            </div>
16            <!-- .header-middle -->
17            <div class="header-right vertical-middle">
18                <a class="btn" href="#CONTACT">お問い合わせ</a>
19            </div>
20            <!-- .header-right -->
21        </div>
22        <!-- .header-inner -->
23    </header>

SASS
1header {
2    width: 100%;
3    height: 94px;
4    position: fixed;
5    top: 0;
6    z-index: 10;
7    background-color: $white;
8    box-shadow: 0px 3px 6px #00000029;
9
10    .header-inner {
11        max-width: 1020px;
12        height: 94px;
13        margin: 0 auto;
14        position: relative;
15        padding: 0 20px;
16    }
17}
18
19.header-left {
20    display: inline-block;
21    width: 240px;
22
23    a {
24        height: 94px;
25        position: relative;
26
27        p {
28            font-size: 1.5rem;
29            font-weight: bold;
30            position: absolute;
31            left: 47px;
32        }
33    }
34}
35
36.header-middle {
37    position: absolute;
38    left: 40.2%;
39
40    a {
41        font-size: 1rem;
42        font-weight: bold;
43        line-height: 24px;
44        margin-right: 46px;
45    }
46}
47
48.header-right {
49    position: absolute;
50    right: 21px;
51}
52
53.vertical-middle{
54    position: absolute;
55    top: 50%;
56    transform: translateY(-50%);
57}
58
59.flex-row {
60    display: flex;
61}
62
63.btn {
64    display: inline-block;
65    text-align: center;
66    width: 155px;
67    height: 37px;
68    padding: 7px 35px 10px 35px;
69    background: transparent linear-gradient(90deg, #FA41CC 0%, #6020B0 100%) 0% 0% no-repeat padding-box;
70    border-radius: 10px;
71    box-shadow: 0px 3px 6px #00000029;
72    font-size: 14px;
73    font-weight: bold;
74    color: $white;
75    line-height: 20px;
76}