Hello.
You have nailed the essential components of this design. The typography, the content structure, and the overall design matches the provided template. Here are a couple of suggestions for taking it to the next level.
Consider using media queries to add responsiveness to your design. The easiest task you could do according to your current structure is to increase the paddings around the recipe component, like so:
@media screen and (min-width: 38.5rem) {
body {
padding: 128px 76px;
}
}
This way, when the viewport hits 38.5rem (or 38.5*16=616px), the paddings increase to the specified values, making the solution closer to the design.
With regard to the semantic markup, there is generally more than one acceptable way to do things. In this challenge, I would say the whole recipe should go in a main tag. A header tag would have been appropriate if there was a navigation bar.
Finally, consider using Prettier. It's a fantastic plugin available in VS Code. It takes care of formatting your indentations, freeing you to concentrate on writing code. Try this video for a quick setup.
I hope it helps.
