Hey guys, I’ve been building this recipe page but I got stuck on the last part. I can’t get it right. Here’s my code:
HTML
<table>
<tbody>
<tr>
<td><span>Calories</span></td>
<td>277kcal</td>
</tr>
<tr>
<td><span>Carbs</span></td>
<td>0g</td>
</tr>
<tr>
<td><span>Protein</span></td>
<td>20g</td>
</tr>
<tr>
<td><span>Fat</span></td>
<td>22g</td>
</tr>
</tbody>
</table>
CSS
.container .form-wrap-2 .table-1 {
margin-top: 20px;
}
.container .form-wrap-2 .table-1 h2 {
font-family: "Young serif", sans-serif;
color: hsl(14, 45%, 36%);
}
.container .form-wrap-2 .table-1 p {
color: hsl(30, 10%, 34%);
margin-top: 10px;
font-size: 13px;
}
.container .form-wrap-2 .table-1 table {
font-size: 13px;
color: hsl(14, 45%, 36%);
margin-top: 20px;
text-indent: 25px;
}
.container .form-wrap-2 .table-1 table span {
color: hsl(30, 10%, 34%);
align-items: center;
}
.container .form-wrap-2 .table-1 table td:nth-child(odd) {
border-bottom: 0.5px solid hsl(30, 18%, 87%);
padding-right: 170px;
padding-bottom: 10px;
}
Here are two screenshoots of what I should accomplish and what I’m actually getting: