"Recipe page layout using Flexbox with basic responsive design.

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

I can structure HTML better with Flexbox, which makes the code much cleaner and easier to read when inspected in the browser.

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

I had trouble styling the gap between the bullet and text in an <li> element. At first, I tried using a CSS workaround with the text-indent property, but it didn’t work as expected. So I switched to using Flexbox instead, which solved the issue—it made it much easier to control both the spacing and alignment.

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

I'm looking for better ways to style the gap between the bullet (or number) and the text. Is it considered good practice to use <p> elements with Flexbox for this purpose, or would it be better to use a semantic tag like <ol>?

<div class="list">
   <p class="number">1.</p>
   <p class="list-content"><span>Beat the eggs:</span> In a bowl, beat the eggs with a pinch of 
    salt and pepper until they are well mixed.You can add a tablespoon of water or milk for a fluffier texture.</p>
</div>