html & css

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 25 days ago

  Congratulations on completing this challenge. The page is looking good so far. I have a few suggestions.

  First, the component does not sit in the middle of the page. This is because the margin is not quite right. To correct this, remove max-width: 600px from the body tag. Next, remove the margin styles from the .contaner class and add margin: 30px auto Now the component sits in the middle of the page.

  A more serious issue is that the html is wrong. You cannot use <dt> inside a table. <table> contain <tr> which contain <th> and <td>; So tables contain rows which contain table headers and table data This article explains in more detail. For this project, you would need to structure your table this way:

        <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>
        </table> 
  

  To style the numbers in the table, target the <td>

  td {
      color: rgb(112, 131, 5); 
      font-weight: bold;
  }
  

  Also, the closing body tag comes before the closing body tag.

  Hope this helps.

  0