Need help with this project - HTML/CSS

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:


im guessing you have it live some where too? you can share that link as it would be more interactive way of troubleshooting that.

happy coding :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.