html - s 在桌面上进入全屏宽度，但在移动设备上没有，为什么？

Question

我完全不知道是什么推动了我的视口。

我的<div>s 应该在屏幕上 100% 伸展，但很快就停止了，我不知道为什么。

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

我喜欢有人的直觉。或者真的如何去寻找问题。

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

因此，如果有人可以立即看到导致问题的原因，那将有所帮助。hero-image 和幻灯片的容器<div>似乎超出了视口，但它们被设置为 100%，所以我不知道为什么，或者如何修复它。

我想要一些善良的眼睛。

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

标签： htmlcssresponsive-design

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;
}

样式框-test.css:414

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