Recipe-page with Flex-box and CSS Grid

Awesome job! Your approach is certainly cleaner and more responsive than mine.

Personally I divided the image dimensions by 2. This is a practice that's used to support higher resolution screens. Then I doubled the margin and added these two numbers together to restrict the width of my container.

I think your margin problem stems from you using

@media screen and (min-width: 767px) {
    .margin-bottom {
        padding: 4rem 0;
    }
}

.container {
    margin: 0 auto;
}

Instead try

@media screen and (min-width: 767px) {
    .margin-bottom {
            display: flex;
            justify-content: center;
    }

    .container {
        margin: 4rem;
    }
}

.container {
    margin: 0;
}