Why is the first step moving with the page when changing the responsive layout?

Question

The code in question: https://jsfiddle.net/3uLj8rw6/

Firstly, I'd like to mention that I am still learning HTML, CSS, and Sass.

"Choose a restaurant" seems to move with the page itself when adjusting the responsive layout in Chrome.

Is this a problem with the layout of the HTML, the Flex in the CSS, or the Media Query?

media query via 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;
}