Live Server doesn't recognize my 'div' containers

HTML/CSS
1

It was a path error. As long as I specify the path to the stylesheet from the root instead of what I was doing before, it works 100% of the time. I conclude that my understanding of path logic is lacking. Thanks for the all the help guys, I appreciate it.

. . . . . . . . . . . . .

edit: I solved it, but I have no idea how. After two hours of monkeying around I saw a little popup at the bottom of vscode saying that the liveserver needed to refresh. I clicked it, and all of a sudden, presto, vscode and live server are reading the pathways to my stylesheet correctly.

I wish I knew why it had to be that, but I’m just glad it’s working now.

. . . . . . . . . . . . . . . . . . . . . . . . .

Edit: This is probably what’s wrong, but I’m not sure I understand what the flagged error means. I got this message in DevTools when I examined the first html example I pasted below:

Refused to apply style from 'http://127.0.0.1:5500/Css/table_exercise_1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

What does this mean? Can I change how my browser checks MIME? Are my files formatted incorrectly?

This is an answer I found on stack overflow:

It happens when you set an incorrect URL to the file or when your server isn’t configured properly. In the result, the browser DOESN’T get the stylesheet, but it gets some HTML with 404 status and with the “Content-Type” header. Since the browser gets something from the server, it doesn’t tell you there is no reply, but it tells you the MIME type of the file is incorrect. The fastest way to check it is just to try to open the file directly http://localhost:3000/assets/styles/custom-style.css in a new tab.

I’m pretty sure my URL to the file is right, so I assume that I need to reconfigure my live server somehow. I’ll keep looking but right now I’m confused.

. . . . . . . . . . . . . . . . . . . . . . . . . .

This is really strange. So I booted up chrome like I have for the past week, and none of my ‘div’ containers are recognized when I run live server. So I scanned my code for any holes and I tried out a bunch of stuff, and for some reason live server recognizes ‘p’, but none of the formatting on my stylesheet. I tried out inline stylesheets with ‘div’ as well, and those weren’t recognized either. It’s like ‘div’ is just invisible. This is true for the past exercises I’ve done as well, all of which worked perfectly until today. I didn’t change any of their code. Here is an example of a past exercise that worked:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>Document</title>
    <link rel="stylesheet" href="../Css/table_exercise_1.css" />
    <link rel="stylesheet" href="../Css/NORMALIZE CSS.css" />
  </head>
  <body>
    <main>
      <div>
        <table class="airline_table">
          <thead class="header_table">
            <tr class="tr_test1">
              <th>Country</th>
              <th>OrderID</th>
              <th>Order Amount</th>
            </tr>
          </thead>
          <tbody class="psuedoselect">
            <tr class="table_body_row">
              <td>USA</td>
              <td>1000</td>
              <td>$1300</td>
            </tr>
            <tr class="table_body_row">
              <td>USA</td>
              <td>1001</td>
              <td>$700</td>
            </tr>
            <tr class="table_body_row">
              <td>CA</td>
              <td>1002</td>
              <td>$2000</td>
            </tr>
            <tr class="table_body_row">
              <td>CA</td>
              <td>1003</td>
              <td>$1000</td>
            </tr>
          </tbody>
          <tfoot class="table_footer">
            <tr>
              <td>Total</td>
              <td></td>
              <td id="colspantest">$5000</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </main>
  </body>
</html>

And here’s the stylesheet:

.airline_table {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    width: 450px;
    height: 200px;
    border-collapse: collapse;
    font-size: 18pt;
    table-layout: fixed;
    text-align: left;
}
.header_table {
    background-color: #427fef;
    color: white;
    margin: 0px;
}
.table_body_row {
    border-top: 2px solid #c4dcf3;
}
.table_footer {
    background-color: #427fef;
    color: white;
    font-weight: bold;
}
.psuedoselect tr:nth-child(even) {
    background-color: #eef7ff;
}

If you run this code you’ll see the text popup in the correctly formatted spot, but none of the styling. This is true for my other exercises.

At first I assumed maybe there was an issue with a new version of Live Server, so I closed down my vscode, disabled then re-enabled live server, uninstalled then reinstalled live server, and then I just installed an older version of live server, and the same thing is happening.

After this post I’m going to install an older version of Chrome. Maybe that’s the issue?
Any ideas? Thank you.

edit:
Here’s another one of my exercises using ‘div’ that just doesn’t show up for me:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>Document</title>
    <link rel="stylesheet" href="../Css/basicboxexercise1.css" />
    <link rel="stylesheet" href="../Css/NORMALIZE CSS.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Stylesheet:

.box {
    width: 500px;
    height: 500px;
    color: white;
    background-color: tomato;
    border-radius: 20px;
    margin: 100px;
    box-shadow: 20px 20px lightgray;
}