Recipe page

Congratulations on finishing this challenge. Your desktop version looks great @1440px, and I love the way you have organized the html into sections using comments. That makes it super easy to read and maintain.

However, when I tried to view the web page on my iphone, it was a mess. This is because you centered your content using margins and padding, which works great for the desktop version, but does not work at all on mobile. Centering content on the page is a critical skill for these challenges. This article explains the different ways to center content.

When I studied your web page, I was able to fix the mobile problem by setting a width of 70rem on the container, and using flexbox to center it.

body {
  background-color: antiquewhite;
  /* add */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #fff;
  /* margin: 100px; */
  padding: 50px;
  border-radius: 20px;
  /* add */
  width: 70rem;
}

Then I added a media query to tidy things up a bit for mobile.

@media screen and (max-width: 400px) {
  .container {
    width: 85%;
    padding: 25px;
  }
}

You did a great job on coloring the list markers; many people miss that detail. However, the stats under the Nutrition-type are also a brown color and bold font. What you need to do is target "the list item of the ul which is the second child of Nutrition-type."

.Nutrition-type ul:nth-child(2) li {
  font-weight: bold;
  color: rgb(109, 26, 26);
}

Also, the Preparation div has a faint background color:

.Preparation {
  background-color: rgb(255, 247, 251);
  padding: 5px 10px;
}

Try it out, see what you think; and keep on coding! Good luck on your 100 day challenge,