The bootstrap link and css files are not being applied to a certain url. How do I fix it? Tell me if any other files are necessary to answer it

Question

The bootstrap link and css files are not being applied to url "/list/:customListName" but when I change this to "/:customListName", somehow it works. What is the logic behind this and how do I apply styles to this url "/list/:customListName" ? app.js:-

const express = require('express');
const bodyParser = require('body-parser');
const date = require(__dirname + '/date.js');
const mongoose = require('mongoose');
mongoose.connect("mongodb://127.0.0.1:27017/todoListDB").then(() => console.log('connected')).catch(e => console.log(e));


const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public"));


const itemSchema = mongoose.Schema({
    name: {
        type: String,
        required: true,
    }
});
const Item = new mongoose.model('Item', itemSchema);

defaultItems = [
    { name: "Welcome to your Todo List" },
    { name: "Hit '+' button to add a new item" },
    { name: "<--Hit this to check" },
];

const listSchema = mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    items: [itemSchema]
});
List = mongoose.model('List', listSchema);


app.get("/", (req, res) => {
    const day = date.getDate();
    Item.find({}).then(foundItems => {
        if (foundItems.length === 0) {
            Item.insertMany(defaultItems).then(() => {
                res.redirect("/");
            }).catch((err) => {
                console.log(err);
            });
        } else {
            res.render("list", { listTitle: day, newListItems: foundItems });
        }
    })
});

app.post("/", (req, res) => {

    if ((x = req.body.newItem) !== "") {
        const itemName = req.body.newItem;
        Item.create({
            name: itemName
        });
        res.redirect("/");
    } else {
        res.redirect("/");
    }
});

// *************See here***************
app.get("/list/:customListName", (req, res) => {
    customListName = req.params.customListName;

    List.findOne({ name: customListName })
        .then((foundList) => {
            if (foundList) {
                res.render("list", { listTitle: foundList.name, newListItems: foundList.items })
            } else {
                List.create({
                    name: customListName,
                    items: defaultItems,
                });
                // *************See here***************
                res.redirect("/list/"+customListName);
            }
        })
        .catch((e) => { console.log('Error: ' + e); })

});

app.post("/delete", (req, res) => {
    const itemId = req.body.checkbox;
    Item.deleteOne({ _id: itemId }).then(() => {
        res.redirect("/");
    }).catch(e => console.log(e));
});


app.post("/work", (req, res) => {
    res.redirect("/work");
});

app.get("/about", (req, res) => {
    res.render("about", { listTitle: "About Me" });
});

app.listen(3000, () => {
    console.log("Server running on http://127.0.0.1:3000");
});

This was the error I was getting in the dev console:-

list.ejs:-

<%- include('header') %>
    <div class="box" id="heading">
        <h1>
            <%= listTitle %>
        </h1>
    </div>

    <div class="box">

        <% newListItems.forEach(item=> { %>

            <form action="/delete" method="post">

                <div class="item">
                    <input type="checkbox" name="checkbox" value="<%= item._id %>" onchange="this.form.submit()">
                    <p>
                        <%= item.name %>
                    </p>
                </div>

            </form>
            <% }); %>

                <form class="item" action="/" method="post">
                    <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
                    <button type="submit" name="list" value="<%= listTitle %>">+</button>
                </form>
    </div>

    <%- include('footer') %>

header.ejs:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Todo List</title>
</head>

<body>

Answer 1

Short answer: it should be /css/style.scss rather than css/style.scss.

<link rel="stylesheet" href="/css/style.css">

---

Long answer:

<link/> tag 's href attribute accept an absolute URL or a relative URL.

The behavior of a relative URL with and without the leading slash / is different. The leading slash indicates that the link is relative to the root of the website.

E.g.

The current URL is http://localhost:3000/list/apple and we have static assets directory like this <Project Root>/public/css/style.css.

If the link tag is <link rel="stylesheet" href="css/style.css">, the HTTP request URL for style.css will be http://localhost:3000/list/css/style.css.

If the link tag is <link rel="stylesheet" href="/css/style.css">, the HTTP request URL for style.css will be http://localhost:3000/css/style.css.

When the request comes to the server, express will look up the css/style.css file relative to the public directory.