Recipe page

Congratulations on completing this challenge. Your webpage looks great on the desktop, your html is clean and uncluttered, and your css is well organized.

However, when viewed on the mobile phone, the page breaks and the writing spills out of the container. Fixing this is a two step process. First, wrap the ingredients block in a div with the class name "ingredients" and wrap the instruction block in a div with class "instructions". Next, add a media query to the bottom of the css:

      @media screen and (max-width: 480px) {
        section,
        .instructions,
        .ingredients {
          width: 90%;
        }
      }

Now it looks great on the mobile device.

Another suggestion is to color the dots on the ul and numbers on the ol. The design calls for a rose color on the preparation list, and the ingredients and instructions are brown. To do this, you need to add some utility classes. <ul class="list rose"> for the preparation-container list and <ul class="list brown"> for the ingredients list and <ol class="list brown">for the instructions. Then, in the css add:

     .rose ::marker { color: hsl(332, 51%, 32%);   }

      td,
      .brown ::marker {
        color: hsl(14, 45%, 36%);
        font-weight: 800;
      }

Now your page looks exactly like the design. Hope this helps.