Hello !, I see that you have used divs for almost everything. There are other things you can do to implement the objects you want for instance.
You can use table to generate a table format for you, here is the HTML tr = table row th = table head td = table data
<div class="nutrition"> <h2 class="smallheading">Nutrition</h2><br> <p class="ingredientlist" id="nutritiontext"> The table below shows nutritional values per serving without the additional fillings</p> <div class="nutritiontable"> <table> <tr> <th>Calories</th> <td>277kcal</td> </tr> <tr> <th>Carbs</th> <td>0g</td> </tr> <tr> <th>Protein</th> <td>20g</td> </tr> <tr> <th>Fat</th> <td>22g</td> </tr>Here is the css
table{ margin-left: 30px; margin-right: 30px; width: 100%; border-collapse: collapse; }
th,td{ text-align: left; padding: 15px 20px; border-bottom: 1px solid hsl(30, 18%, 87%); }
th{ font-family: 'Outfit'; font-weight: 400; color: hsl(30, 10%, 34%); }
td{ color: hsl(14, 45%, 36%); font-family: 'Outfit', sans-serif; font-weight: 600; }
Marked as helpful
0
