Node.js Pug - CSS won't load on one specific page - node.js

Question

Im building my first node.js app with express and pug as view/template eingine. A problem I am experiencing atm is the following:
Issue: Same CSS file loads on other routes & template.pugs but won't load on one specific route/template. Get a 404 error.
my server.js:
var express = require('express');
var path = require('path');
var app = express();
var bodyParser = require("body-parser");
app.set('views', './templates');
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
require('./router')(app);
var listener = app.listen(process.env.PORT, function() {
console.log('Server is live on PORT : ' + listener.address().port);
});
my router.js (css loads for "/" & "/events", not for /events/new"):
var controller = require ('./controller');
module.exports = function (app) {
//start
app.get('/', controller.index);
// All Events View
app.get('/events', controller.show_events);
app.get('/events/new', controller.new_event_form);
};
my controller.js (css loads for "index" & "show_events", not for "new_event_form" )
module.exports = {
index: index,
show_events: show_events,
new_event_form: new_event_form
};
function index (req, res) {
res.render('index');
}
function show_events(req, res) {
res.render('show_events');
};
function new_event_form(req, res) {
res.render('new_event_form');
};
Now comes the odd part. For this template "show_events.pug" it loads the css file. route: /events
doctype
html
head
title Database
link(rel='stylesheet', href='./css/main.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
body
div#wrapper
header
h1 Database: Events
menu
a(href='/')
h2 Back
a(href='/events/new')
h2 Create New Event
But for this template "new_event_form.pug" it won't load the css file. Route: /events/new
doctype
html
head
title Database
link(rel='stylesheet', href='./css/main.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
body
div#wrapper
header
h1 Event: New
menu
a(href='/events')
h2 Cancel
Css perfectly loads as well for the index "/" route.
Folder/file structure so far
controller.js
router.js
server.js
public
- - css
- - - - main.css
templates
- - index.pug
- - show_events.pug
- - new_event_form.pug
Kind find any mistake so far, don't get why it loads on the index route and the show_events route, but not on the new_event_form route.
Thanks for any hints or solution !
Update
when comparing the routes i noticed some differencies:
- for https://terminal.glitch.me/events the request adress for the css file is https://terminal.glitch.me/css/main.css
- for https://terminal.glitch.me/events/new the request adress for the css
file is https://terminal.glitch.me/events/css/main.css

Answer 1

So simple:
In the pug file for the events/new route the link ref should contain
2 dots before /css/main.css, not 1
So I changed this
link(rel='stylesheet', href='./css/main.css')
to this
link(rel='stylesheet', href='../css/main.css')
now it's working
It was just not clear for me how to use ../ this type of things for absolute paths ...