desktop and mobile responsive omelette recipe

Hi Jackie, I like your solution!

For centering the component within a container I think that the way you did it with the .center class is a good approach:

.center{
    display:flex;
    align-items: center;
    justify-content: center;
}

And for centering things vertically in the viewport I think just adding padding is a good way to do it!

As long as the container's height is larger than the height of the component, align-items: center will center it vertically.

margin would also work, but in this case padding is better in my opinion.

One suggestion I would have would be to use classes instead of ids as selectors when styling different sections. In a smaller project like this it's fine, but styling with ids should be a last resort because they have a high specificity and it could make figuring out why a certain style is or isn't getting applied more complicated and confusing if you have a big mix of .class styles and #id styles.

Hope that was helpful!