外枠と中身に微妙なずれが生じてしまいました。

画像のように外枠と中身の間にスキマが出来てしまいました。
どうすればこのスキマを無くせますか？

scss
1/* CSSのリセット */
2* {
3  margin: 0;
4  padding: 0;
5  -webkit-box-sizing: border-box;
6          box-sizing: border-box;
7  outline: none;
8  font-family: 'Roboto', sans-serif;
9}
10
11
12
13/* メインビジュアル */
14.mv {
15  height: 500px;
16  background-color: #ABCDD6;
17  /* MV右側 */
18}
19
20.mv-item {
21  max-width: 1140px;
22  margin: 0 auto;
23  display: -webkit-box;
24  display: -ms-flexbox;
25  display: flex;
26}
27
28.mv-left {
29  width: 50%;
30  padding-top: 20px;
31  padding-left: 35px;
32  /* border:2px solid red; */
33}
34
35.mv-left h1 {
36  font-size: 36px;
37  /* border:2px solid red; */
38}
39
40.mv-left-search span {
41  font-size: 28px;
42  color: red;
43  font-weight: bold;
44}
45
46.mv-input {
47  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
48          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
49  border-radius: 8px;
50  display: -webkit-box;
51  display: -ms-flexbox;
52  display: flex;
53  margin-top: 8px;
54  max-width: 480px;
55  /* border:2px solid red; */
56}
57
58.mv-input > * {
59  height: 50px;
60  padding: 8px;
61  -webkit-box-sizing: border-box;
62          box-sizing: border-box;
63  outline: none;
64  border: 2px solid black;
65}
66
67.mv .search-input {
68  width: 100%;
69  font-size: 16px;
70  border-right: none;
71  border-radius: 8px 0 0 8px;
72}
73
74.mv .search-btn {
75  width: 100px;
76  font-size: 32px;
77  line-height: 1;
78  cursor: pointer;
79  border-radius: 0 8px 8px 0;
80  background-color: #ffcc00;
81}
82
83.mv .recomend-keyword {
84  padding-top: 12px;
85}
86
87.mv .recomend-keyword-tag {
88  list-style: none;
89  padding-top: 12px;
90  display: -webkit-box;
91  display: -ms-flexbox;
92  display: flex;
93  -ms-flex-wrap: wrap;
94      flex-wrap: wrap;
95}
96
97.mv .recomend-keyword-tag a {
98  background-color: #00acee;
99  border: 2px solid black;
100  margin-left: 6px;
101  margin-top: 6px;
102  border-radius: 4px;
103  padding: 2px 10px;
104  font-weight: bold;
105  cursor: pointer;
106  font-size: 12px;
107  font-weight: bold;
108  display: block;
109  padding: 7px;
110  font-size: 12px;
111  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
112          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
113  border-radius: 8px;
114}
115
116.mv-right {
117  width: 50%;
118  padding-top: 20px;
119  padding-right: 35px;
120  position: relative;
121  /* border:2px solid red; */
122}
123
124.mv .japanMap {
125  height: 400px;
126  margin: 0 auto;
127  /* border:2px solid red; */
128}
129
130.mv .map-area {
131  -webkit-box-sizing: border-box;
132          box-sizing: border-box;
133  width: 66px;
134  border: 2px solid black;
135  border-radius: 6px;
136  overflow: hidden;
137}
138
139.mv .map-area li {
140  list-style: none;
141  border-bottom: 2px solid black;
142  padding: 2px;
143  width: 66px;
144  height: 28px;
145  font-size: 14px;
146  font-weight: 700;
147  overflow: hidden;
148  background-color: #ffcc00;
149  display: -webkit-box;
150  display: -ms-flexbox;
151  display: flex;
152  -webkit-box-pack: center;
153      -ms-flex-pack: center;
154          justify-content: center;
155}
156
157.mv .map-area a {
158  color: #030201;
159  text-decoration: none;
160}
161
162.mv .map-area li:last-child {
163  border-bottom: none;
164}
165
166/* 以下2列(.multi)の場合 */
167.map-area.multi {
168  display: -webkit-box;
169  display: -ms-flexbox;
170  display: flex;
171  width: 136px;
172  -ms-flex-wrap: wrap;
173      flex-wrap: wrap;
174}
175
176.map-area.multi li:nth-child(odd) {
177  border-right: 2px solid black;
178}
179
180.map-area.multi li:nth-last-child(2) {
181  border-bottom: none;
182}
183
184/* 県ごと */
185.map-area.kyushu {
186  position: absolute;
187  top: 100px;
188  left: 10px;
189  -webkit-box-shadow: 0 2px 4px black;
190          box-shadow: 0 2px 4px black;
191  border-radius: 8px;
192}
193
194.map-area.chugoku {
195  position: absolute;
196  top: 100px;
197  left: 80px;
198  -webkit-box-shadow: 0 2px 4px black;
199          box-shadow: 0 2px 4px black;
200  border-radius: 8px;
201}
202
203.map-area.kansai {
204  position: absolute;
205  top: 156px;
206  left: 150px;
207  -webkit-box-shadow: 0 2px 4px black;
208          box-shadow: 0 2px 4px black;
209  border-radius: 8px;
210}
211
212.map-area.shikoku {
213  position: absolute;
214  top: 320px;
215  left: 100px;
216  -webkit-box-shadow: 0 2px 4px black;
217          box-shadow: 0 2px 4px black;
218  border-radius: 8px;
219}
220
221.map-area.chubu {
222  position: absolute;
223  top: 300px;
224  left: 245px;
225  -webkit-box-shadow: 0 2px 4px black;
226          box-shadow: 0 2px 4px black;
227  border-radius: 8px;
228}
229
230.map-area.hokuriku {
231  position: absolute;
232  top: 100px;
233  left: 290px;
234  -webkit-box-shadow: 0 2px 4px black;
235          box-shadow: 0 2px 4px black;
236  border-radius: 8px;
237}
238
239.map-area.touhoku {
240  position: absolute;
241  top: 200px;
242  left: 400px;
243  -webkit-box-shadow: 0 2px 4px black;
244          box-shadow: 0 2px 4px black;
245  border-radius: 8px;
246}
247
248.map-area.kantou {
249  position: absolute;
250  top: 300px;
251  left: 400px;
252  -webkit-box-shadow: 0 2px 4px black;
253          box-shadow: 0 2px 4px black;
254  border-radius: 8px;
255}
256
257.map-area.hokkaido {
258  position: absolute;
259  top: 60px;
260  left: 430px;
261  -webkit-box-shadow: 0 2px 4px black;
262          box-shadow: 0 2px 4px black;
263  border-radius: 8px;
264}
265
266.map-area.okinawa {
267  position: absolute;
268  top: 400px;
269  left: 10px;
270  -webkit-box-shadow: 0 2px 4px black;
271          box-shadow: 0 2px 4px black;
272  border-radius: 8px;
273}
274
275

【HTML】
https://harigami.jp/cd?hsh=b527d0d6-a731-4170-8dfc-071eaa403d17

コードが長すぎて貼れなかったので、上のサイトに貼りました。

Lhankor_Mhy

2020/09/05 02:18

SCSSが省略されすぎていますので、問題が再現するコードをご提示ください。

takawork

2020/09/05 06:40

該当部分の全体のscssを載せてみました。よろしくお願いします。

Lhankor_Mhy

2020/09/05 06:45

コンパイルエラーが出ます。

Lhankor_Mhy

2020/09/05 06:47

.mv { 〜〜〜この部分が不要であるように思えたので削除してみました。やはり、問題が再現しませんでした。 takaworkさんの環境ではご提示のコード*だけ*で問題が再現しますか？

Lhankor_Mhy

2020/09/05 06:56

ああ、なるほど。 HTMLの最初に <section class="mv"> <div class="mv-item"> が、省略されているのですね？しかしながら、やはり問題が再現しませんでした。

takawork

2020/09/05 07:09

修正で新たにscssとHTMLを貼りました。このコードで該当部分は表示できております。これで再現出来ますでしょうか？

Lhankor_Mhy

2020/09/05 07:16

拝見しましたが、問題が再現しませんでした。ただ、いくつかのスクリプトのコードが不明だったので、それは無視しています。

takawork

2020/09/05 07:18

回答者様の方では綺麗に表示されているということでしょうか？

Lhankor_Mhy

2020/09/05 07:21

はい、そうですね。もしかしてなのですが、ズームしてませんか？

takawork

2020/09/05 07:26

なるほど、ズームをしておりました。実際のサイズに変更をしたところ、綺麗に写りました。ありがとうございます。このようなデザインは基本的には、ズームをしたりすると崩れるのでしょうか？一般的なサイトはこういったズームに対してもレスポンシブ設定を行っているのでしょうか？今後のサイト制作の方針にしたいと思います。

Lhankor_Mhy

2020/09/05 07:34

ズームに対して細かい表示の対応をするのは難しいかと思います。ご解決されて何よりです。自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself ついでに一言言わせていただきますと、次に質問するときは、初めから問題が再現するコードをご提示ください。時間の無駄です。技術が不足しているのは学習途中ですから恥じる必要はないと思いますが、これはコミュニケーションの問題ですから、解消可能なはずです。

takawork

2020/09/05 07:36

かしこまりました。必要十分なコードかと思っておりましたが、確認不足でした。次回からは気をつけます。ご回答ありがとうございました。またよろしくお願いします。