Responsive Food Reciepe Page using css FlexBox

Looks good, my suggestion is for the centering the whole thing i nomally do this.

body {
    display: grid;
    place-items: center;
    min-height: 100svh/vh/dvh; //svh and dvh are mainly for mobile view, it's for when you have the search bar at the top of the menu screen on mobile.
}

Also I would avoid adding heights to anything as the div should be fine with its auto height. You only mainly uses heights for small things and for a main hero section that has a image for a site.

Also with your lists try just sticking with the <ul> <ol> tags, you can customize the dots through css like this

<ul class="custom-bullets">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

ul {
  list-style-type: none; /* Remove default bullets */
}

ul.custom-bullets {
  list-style-type: none; /* Remove default bullets */
}

ul.custom-bullets li::before {
  content: "•"; /* Unicode for bullet character */
  color: #ff0000; /* Color of the bullet */
  font-size: 20px; /* Size of the bullet */
  margin-right: 10px; /* Spacing between bullet and list item content */
}

Also i noticed with the nurtrition at the bottom the first digit is off to the left I willgive you some code that can achive the result you want.

HTML

<div class="nutrition">
        <div class="nutrition-item">
            <p class="nutrition-title">Calories</p>
            <p class="nutrition-info">27kcal</p>
        </div>
        <div class="nutrition-item">
            <p class="nutrition-title">Carbs</p>
            <p class="nutrition-info">0g</p>
        </div>
        <div class="nutrition-item">
            <p class="nutrition-title">Protein</p>
            <p class="nutrition-info">20g</p>
        </div>
        <div class="nutrition-item">
            <p class="nutrition-title">Fat</p>
            <p class="nutrition-info">22g</p>
        </div>
    </div>

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    display: grid;
    place-items: center;
    min-height: 100svh;

    color: #18181b;
}

.nutrition {
    width: 400px;
    border: 1px solid #1e293b;
    border-radius: .5rem;
}

.nutrition-item {
    display: flex;
    align-items: center;

    padding: 1rem;
}

.nutrition-item:not(:last-child) {
    border-bottom: 1px solid #94a3b8;
}

.nutrition-title {
    font-weight: 600;
    font-size: 1.125rem;
}

.nutrition-info {
    margin-left: auto;

    color: #ea580c;
    font-weight: 700;
}

I hope this helps and if you have anything else you want to know i will be more than happy to help.

I just wanted to let you know guys, I missed uploading the image file to the git that's why and yeah ofcourse you know that but I hope my submission is very helpful, and I want you to review it and give me a feedback. I want you also to review my structure.