Responsive Recipe Page

What are you most proud of, and what would you do differently next time?

I am really pleased with the responsiveness of the page, works on small and large screens. I chose to use display: grid and gap to add white-space between the elements.

What challenges did you encounter, and how did you overcome them?

I had issues with the lists, aligning the bullets and also the wrapping text. I used list-style-position: inside; and text-indent: -2.2em; for those. To get the bullets and text different colours I wrapped the text in a ``. And with the table after some research I was able to align it correctly and add the lines between the rows

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

tr {
  border-bottom: 1px solid hsl(30, 18%, 87%);
}

tr:last-child {
  border-bottom: none;
}

What specific areas of your project would you like help with?

How would you get the lists to align and the text so it doesn't wrap immediately underneath the bullet point?