Border not collapsing & pseudo-class selectors not highlighting

1

Hello, I just recently tried to complete the first exercise in the The Ultimate HTML5 & CSS3 Series: Part 1.

I tried collapsing the borders as seen in the video, but it is not working. Also, the pseudo-class selectors to highlight the odd rows doesn’t seem to be working either. Can anyone give me some feedback on what may be going wrong? VSCODE pasted below and CSS code attached.

CSS for first exercise
CSS for first exercise634×714 19.9 KB

VSCODE:

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>EXERCISE 1</title>

<link rel="stylesheet" href="exercise1.css" />

<style></style>

<table>

  <thead class="header">

    <tr>

      <th>Country</th>

      <th>Order ID</th>

      <th>Order Amount</th>

    </tr>

  </thead>

  <!--  -->

  <tbody class="body">

    <tr>

      <td>USA</td>

      <td>$1000</td>

      <td>$1,300</td>

    </tr>

    <tr>

      <td>USA</td>

      <td>1001</td>

      <td>$700</td>

    </tr>

    <tr>

      <td>CA</td>

      <td>1002</td>

      <td>$2,000</td>

    </tr>

  </tbody>

  <!--  -->

  <tfoot>

    <tr>

      <td>Total</td>

      <td></td>

      <td>$5,000</td>

    </tr>

  </tfoot>

</table>

<div class="box"></div>