html - 为什么 <div> 在桌面上会变成全屏宽度，但在移动设备上却不会？

Question

我完全不知道是什么插入了我的视口(viewport)。

我有 <div> s 应该在屏幕上 100% 拉伸(stretch)但突然停止，我不知道为什么。

我已经研究了好几个小时，并修复了横向滚动，我在 flex-keys 上进行了填充样式迫使它太宽。删除它消除了滚动，但同时消除了整个宽度 <div> s 开始在屏幕右侧几像素处停止。

我喜欢一些人的直觉。或者真正如何着手解决问题。

如果您点击进入该网站，我会在每个元素周围使用边框 *{ border: 1px solid red; }

因此，如果有人可以立即看出是什么导致了问题，那将会有所帮助。容器<div>主图和幻灯片的 s 似乎超出了视口(viewport)，但它们设置为 100%，所以我不知道为什么，也不知道如何修复它。

我想要一些善良的眼睛。

https://pottertour.co.uk/index2.html

Answer 1

从以下类中删除填充。

index2.html:524

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)
.flex-container {
width: 100%;
/* padding-left: 5px; */
/* padding-right: 5px; */
display: flex;
flex-wrap: wrap;
align-items: center;
margin: auto;
}

styles-boxes-test.css:414

.flex-container {
width: 100%;
/* padding-left: 5px; */
/* padding-right: 5px; */
display: flex;
flex-wrap: wrap;
align-items: center;
margin: auto;
}