Problememe liens css et php

Bonjour,

Mon problème est le suivant: Je dois faire un portfolio (petit projet avec l’école) et j'ai séparé le code de ma barre de navigation avec du php le reste est sur la page index. Lorsque je clique par exemple sur l'onglet accueil ou l'onglet portfolio, soit cela me redirige sur ma page d'accueil (ou portfolio si je clique dessus) mais sans le css derriere, soit cela me met que mon fichier n'est point dans le server (Capture d’écran a l'appui)



Voici le code de ma page index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    
    <title>chris dimoke</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    
</head>
<body>
        <header>
            <?php include('barreNav.php')?>
        </header>
<div class="container">
        




</div>
<footer>
    <?php include('footer.php') ?>
</footer>
<script src="js/main.js"></script>
</body>
</html>

Celui de ma barre de navigation qui s'intitule 'barreNavigation.php'

<div class="header">
  <h2>Logo</h2>
  <p>Bienvenue sur mon portfolio</p>
</div>

<div id="navbar">
  <a class="active" href="index.php">Accueil</a>
  <a href="pages/portfolio.php">Portfolio</a>
  <a href="javascript:void(0)">Compétences</a>
  <a href="javascript:void(0)">Hobbies</a>
  <a href="javascript:void(0)">Contact</a>
</div>

Mon fichier du footer 'footer.php'

<div clas="footer">
    <div class="footer-contenu">
        <!-- pied de page droit -->
        <div class="col3gauche">
        <a  href="index.php">Accueil</a>
        <a href="pages/portfolio.php">Portfolio</a>
        <a href="javascript:void(0)">Compétences</a>
        <a href="javascript:void(0)">Hobbies</a>
        <a href="javascript:void(0)">Contact</a>
        </div>
        
        <div class="col3millieu">
        
        </div>

        <div class="col3droit">

        </div>
        </div>
</div>

Merci d'avance pour votre reponse!