[SOLVED] CSS not linking with HTML locally but works in Github Pages

CSS not linking with HTML locally but works in Github Pages

I have been working on a portfolio as a beginner Web Dev project, however, I have come across a problem with linking my CSS.

The page shows as instructed on GitHub pages but when ran locally on any browser, with cache emptied or nor, it simply does not show up.

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
        <link href='styles.css' rel='stylesheet' type='text/css' />
        <title>Mohsen Bakhit</title>
        <script src="script.js" ></script>
    </head>
    <body>
        <div class='header'>
            <h1>Mohsen Bakhit</h1>
            <h2>Developer For Hire</h2>
            
        </div>
    </body>
</html>

And the CSS file:

html {
    font-family: 'Montserrat', 'Open Sans', monospace;
    font-size: 16px;
}

.header {
    position: relative;
    text-align: center;
    color: black;
    background-image: url('/resources/vancouver.jpg');
}

.header h1{
    color: white;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    
}

.header h2{
    font-size: 1.25rem;
    color: white;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
}

To be clear, none of the effects show up, not even the fonts. The files are in the same folder and that is why there is no relative path to the link element. Would really appreciate the help.

Solution

The issue funnily came from me naming my file "styles.css". As soon as I changed that to style.css and change the relative URL, the issue got fixed and everything started working fine.