Recipe page

Great job on this challenge. Your desktop version looks good. However, when I try to view it on my iphone, it does not look right.

The problem is you chose to center the content with padding. This is not a good practice as it will look different on different browsers and screen sizes. It is good practice to use either display: grid or flexbox on the parent element. Then your web page will be responsive. Try this:

     body {
        margin: 0;
        /* padding: 300px; */
        background-color: burlywood;
        display: grid;
        place-content: center;
      }

      .content {
        max-width: 600px;
        background-color: white;
        padding: 0px 20px;
        font-family: "Outfit", sans-serif;
        margin: 10px;
        border-radius: 10px;
      }

(You may also have to set a width on the content.) Now everything looks right on smaller screens.