I have a styles problem when loading headers, content and footers with jquery. For some unknown problem, only the content is loaded, regardless of the styles.

The current code:

index.html

<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            $("#header").load("header/header.html");
            $("#footer").load("footer/footer.html");
            $("#content").load("content/content.html");
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div id="header"></div>
    <div id="content"></div>

    <div id="footer"></div>
</body>
</html>

Header.html I get a error js: (Refused to apply style from 'http://127.0.0.1:XXXX/project/css.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.) Although neither "src" or "href" works

<!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" type="text/css" href="../css.css">
</head>
<body class="bodyHeader">
    <hr>
    HEADER
    <hr>
</body>
</html>

css.css

.bodyHeader {
  background-color: lightblue;
}
.bodyFooter {
  background-color: lightslategray;
}
.bodyContent {
  background-color: lightyellow;
}

I currently display text without styles.

HEADER

CONTENT

FOOTER

I want to visualize:

DIV [all content, measurements and styles] HEADER

DIV [all content, measurements and styles] CONTENT

DIV [all content, measurements and styles] FOOTER

Without any of them overlapping and respecting the distances.

Is it jquery problem?