为什么改变响应式布局时第一步会随着页面移动？

Question

有问题的代码：https://jsfiddle.net/3uLj8rw6/

首先，我想提一下，我仍在学习 HTML、CSS 和 Sass。

在 Chrome 中调整响应式布局时，“选择一家餐厅” 似乎会随着页面本身移动。

这是 HTML 布局、CSS 中的 Flex 还是媒体查询的问题？

media query

通过SASS：

@media only screen and (min-width:800px) {

    .container--body,
    #restaurants {
        padding: 0px 50px;
    }

    .steps {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 307px;
    }

    body {
        padding: 0px;
    }

    .hero-title__margin {
        width: 100%;
        margin-top: 10px;
        margin-left: 172px;
        padding-left: 0px;
    }

    .container--body {
        gap: 15px;
        margin: 20px 0px 25px 0px;
}

Answer 1

正如 Klaassiek 所指出的，这是因为正在移动的元素没有定义的宽度。因此，它会拉伸以适应剩余空间。

始终为使用 Flex 的元素设置定义的宽度/高度。