node.jsのWeb開発でcssが反映されません。

前提・実現したいこと

node.jsでWebアプリを作っています。

発生している問題・エラーメッセージ

ejsにcssが反映されません。

該当のソースコード

コードは以下の通りです。
top.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>stock list</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src = "/send_url.js"></script>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="top-header-left">Addver</div>
        <div class="top-header-list">
          <ul>
            <li>ポスター</li>
            <li>映像</li>
            <li>自律生成</li>
          </ul>
        <div class="top-header-right">
          <ul>
            <li>ログイン</li>
          </ul>
        </div>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>UNLOCK YOUR CREATIVITY.</h1>
        <h2>たくさんのアイデアを組み合わせて</h2>
        <h2>君の創造性を、解き放て。</h2>
        <p>Addverは、誰でも簡単に使えるメディアクリエイティブツールです。</p>
        <p>YouTube、Instagram、Twitter、あるいは街中など</p>
        <p>至る所で見かける「あの」メディア作品を組み合わせて、自分の思いをあっという間に形にしましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class = "btn-signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class = "btn-facebook"><span class = "fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class = "btn-twitter"><span class = "fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="action-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Select Your Action To Be Creative.</h2>
        </div>
        <div class="actions">
          <div class="action">
            <div class="action-icon">
              <img src="">
              <p>みる</p>
            </div>
            <p class = "txt-contents">For Student</p>
          </div>
          <div class="action">
            <div class="action-icon">
              <img src="">
              <p>つくる</p>
            </div>
            <p class = "txt-contents">For Student</p>
          </div>
          <div class="action">
            <div class="action-icon">
              <img src="">
              <p>提供する</p>
            </div>
            <p class = "txt-contents">For Creater</p>
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さぁ、あなたもAddverで「つくりだす学び」を体験してみませんか？</h2>
          <h3>Why don't you experience "learning by creating" with Addver?</h3>
        </div>
        <span class = "btn message">クリエイティブになる</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="">
        <p>UNLOCK YOUR CREATIVITY.</p>
      </div>
    </footer>
  </body>
</html>

app.js

const express = require('express');
const app = express();

app.use(express.static('public'));
app.use(express.urlencoded({extended: false}));

app.get('/', (req, res) => {
  res.render('top.ejs');
});

app.listen(3000);

style.css

* {
  box-sizing: border-box;
}

html{
  font-size: 100%;
  font-family: "Hiragino Kaku Gothic ProN";
  line-height: :1.7;
  letter-spacing: 1px;
}

body{
  margin: 0;
  background-color: blue;
}

a{
  text-decoration: none;
}

.container{
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper{
  padding: 180px 0 100px 0;
  background-image: url();
}

構造は以下の通りです。

list-app-----public-----css-----style.css
               views------top.ejs
               app.js

試したこと

top.ejsに可能性のあるcssのhrefは一通り書きましたが反映されませんでした。

miyabi-sun

2021/11/28 07:14 編集

問題を細分化しましょう。まずF12(Macならcommand+i)でブラウザのデベロッパーツールを立ち上げます。 NetworkタブからCSSを選んでF5(Macならcommand+r)でリロード。これで該当のCSSファイルをそもそもダウンロードして展開出来ているのか、全く出来ていないのか等の状況がわかります。 404とかのステータスになる場合はCSSファイルを置く場所を間違っていたり、 linkタグの指定が間違っています。逆にロードされているならCSSの中身が不正だったり、セレクタ-等がタイプミスで間違っていると言えるでしょう。そのへんを確認して、質問文に追記してみてください。