HTML/CSS移动布局不是'；反应迟钝

我正在开发Frontend Mentor的单一价格网格组件，无法使我的移动设计具有响应性。当我缩小浏览器时，它的顶部会从页面顶部脱落

这里有一个链接：

这是我的存储库：

下面是我的媒体查询中的一段代码

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
}
#bottom-row {
    flex-direction: column;
    box-sizing: content-box;
    width: 200%;
}
#top-box {
    display: flex;
    flex-direction: column;
}

#bottom-right-box {
    border-radius: 0px 0px 15px 15px;
}

#bottom-left-box {
    border-radius: 0px;
}

#top-box, #bottom-right-box, #bottom-left-box {
    box-sizing: border-box;
    padding: 20px;
}

这是一张我正在谈论的照片。我可以向下滚动，但不能向上滚动

---

问题在于，无论页面限制如何，您的翻译都会向上移动元素

transform: translate(-50%, -50%);

您可以在媒体查询中将转换调整为“无”，以获得较小的分辨率，也可以在使用桌面大小时找到另一种方法使div居中

试试这个

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
    transform: translate(50%, 0%);  
    top: 0;  
    left: 0; 
}