Recipe Page Challenge Solution

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

I've learned indentation or spacing between the bullet points and texts by adding left padding to the < li > as shown below:

.ingredients li,
.prep-box li,
.instructions li {
  padding-left: 25px; /*gives space between bullet points and text*/
}

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

When I got to the last section "Nutrition", I was having trouble figuring out how to format the data like keeping all the texts lined up without using < tables >. So I ended up asking AI (MS Copilot to be exact) to suggest how to go about it. After giving me some markup and CSS (with plenty of errors), I tweaked it with my original markup and figured out by giving the spans 100% width, the data is able to maintain its responsive formatting even when screen sizes change.

<div class="nutrition-item">
  <span class="nutrition-label">Calories</span>
  <span class="nutrition-value">277 kcal</span>
</div>

.nutrition-label {
  padding-left: 25px; /*indentation again*/
  width: 100%;
}

.nutrition-value {
  width: 100%;
  font-weight: bold;
  text-align: left;
  color: hsl(14, 45%, 36%);
}