Unable to load CSS, font, and image contents to Nunjuck files in 11ty

I'm building a site using 11ty with Nunjucks. The CSS, font, and image contents are working in the index.njk file, but all other nunjuck files do not load CSS, font, or image contents. I got a 404 status error and so I think the issue is I'm not passing the files to Nunjuck files properly.

Here's my code along with how I structured the app:

File structure

.
└── app/
    ├── node_modules
    ├── public
    ├── src /
    │   ├── _includes/
    │   │   ├── base.njk
    │   │   ├── header.njk
    │   │   └── footer.njk
    │   ├── css/
    │   │   ├── about.css
    │   │   ├── contact.css
    │   │   ├── core.style.css
    │   │   ├── index.css
    │   │   ├── post.css
    │   │   └── service.css
    │   ├── fonts/
    │   │   └── fontname.woff2
    │   ├── images
    │   ├── about.njk
    │   ├── contact.njk
    │   ├── index.njk
    │   ├── post.njk
    │   └── service.njk
    ├── .eleventy.js
    ├── .gitignore
    ├── package-lock.json
    └── package.json

.eleventy.js

module.exports = function(eleventyConfig) {

    eleventyConfig.addPassthroughCopy('./src/css/');
    eleventyConfig.addPassthroughCopy('./src/images');
    eleventyConfig.addPassthroughCopy('./src/fonts');
    eleventyConfig.addPassthroughCopy('./src/main.js');

    return {
        dir: {
            input: 'src',
            output: 'public'
        }
    }
}

base.njk

<!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">
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/core.style.css" />
    <title>{{ title }}</title>
</head>
<body>
    {% include 'header.njk' %}
    {{ content | safe }}
    {% include 'footer.njk' %}
</body>
</html>

index.njk (This file is working)

---
title:  Home - My App
layout: 'base.njk'
---

# Normal HTML content goes here

about.njk (This file is not working. Same cases for other pages like service.njk, contact.njk, etc.)

title: About Us - My App
layout: 'base.njk'
---

# Normal HTML content goes here

I checked file names for typos, removed quote marks in layout: 'base.njk', and even moved all CSS files into a single file to no avail. So why only the homepage is loading contents, while the rest don't?