Refused to apply style because its MIME type ('text/html') is not a supported stylesheet MIME type

I am making a todo-list .But I am facing a problem. The stylesheet is not being applied on localhost:3000/lists/customList . And it is giving the error : Refused to apply style from 'http://localhost:3000/lists/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Where did I go wrong?

const bodyParser = require("body-parser");
const date = require(__dirname + "/date.js");
const mongoose = require("mongoose");





const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/todo-list",{ useNewUrlParser: true, useUnifiedTopology: true });
const itemsSchema=new mongoose.Schema({
  name:String
});

const Item=mongoose.model("Item",itemsSchema);

const getMilk=new Item({name:"Get Milk"}) ;
const getHairCut= new Item({name:"Get a Haircut"});
const goForWalking=new Item({name:"Go for walking"});

const defaultItems = [getMilk,getHairCut,goForWalking];

const listSchema=new mongoose.Schema({
  name:String,
  items:[itemsSchema]
});

const List=mongoose.model("List",listSchema);



app.get("/", function(req, res) {
                Item.find({},function(err,foundItems){
                if(err)console.log(err);
                const day = date.getDate();

                if(foundItems.length===0)
                {
                            Item.insertMany(defaultItems,function(err){
                              if(err)console.log(err);
                              else console.log("Success");
                            });
                }
                res.render("list", {listTitle: day, newListItems: foundItems});
                });
});

app.get("/lists/:customListName",function(req,res)
{
  const customListName=req.params.customListName;

  List.findOne({name:customListName},function(err,foundList)
  {
    if(err)console.log(err);
    else{
      if(foundList)  {res.render("list", {listTitle: foundList.name, newListItems: foundList.items});}
      else {
          const list=new List({
          name:customListName,
          items:defaultItems});
          list.save();
          res.redirect("/lists/"+customListName);
        }
      }
  });

});

app.post("/delete",function(req,res){
const itemId=req.body.checkBoxName;
console.log(itemId);
Item.findByIdAndRemove(itemId,function(err){
  if(err)console.log(err);
  else console.log("Successfully deleted");
})
res.redirect("/");
});

app.post("/", function(req, res){
    let item = new Item({name:req.body.newItem});
    item.save();
    res.redirect("/");
});


app.get("/about", function(req, res){
  res.render("about");
});

app.listen(3000, function() {
  console.log("Server started on port 3000");
});

I changed : app.get("/lists/:customListName",function(req,res){...}); Into : app.get("/:customListName",function(req,res){...}); And now the stylesheet is getting applied. However I don't know how or why.