2ページ目のHTMLに新たに作成したCSSが全く反映されない

初めまして。現在独学でHTML5とCSSを勉強しており、テストでHPを作ってます。
TOPページはHTMLにはCSSが問題なく反映されて作成できたのですが、そのTOPページに作ったボタンにリンクする別のページを新たに作ったところ、そちらのHTMLに新たに作ったCSSが全く反映されません。

試したこと

キャッシュの削除
HTMLをソース表示させ、そこからCSSのリンクをクリックして問題なく該当のCSSに飛ぶことは確認
HTML, CSS共にファイルを作成し直したり、階層を変更したりしましたが全く状況が変わらない（現在はTOPページの配下にフォルダを作成し、そちらに同じ階層で２ページ目のHTMLとCSSがあります）

補足情報（FW/ツールのバージョンなど）

Visual Studio CodeとChromeを使用

＜TOPページのHTML＞index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="◯◯農園では自然豊かで水が綺麗な徳島県の農園で栽培した農産物をネット販売しております。">
    <link rel="icon" href="icon.png">
    <title>◯◯農園</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <div class="pic">
        <img src="img/top.png">
      </div>
    </header>

  <section class="features">
    <section>
      <div class="container">
        <h1>◯◯農園の紹介</h1>
        <ul>
          <li>農園について</li>
          <li>生産者</li>
        </ul>
      </div>
    </section>
    
    <section>
      <div class="container">
        <h1>お野菜のお買い物方法</h1>
        <p>「売り場」に行って好きなお野菜を選び、数量を洗濯して、「買い物カゴ」に入れます。お買い物金額は自動的に計算され、最後にお会計に進みます。</p>
      </div>
    </section>

    <section class="uriba">
      <h1>野菜売り場へGO</h1>
      <a href="uriba/index.html" target="_blank" class="btn">売り場</a>
    </section>
  </section>
  </body>
  </html>

＜TOPページのCSS＞css/style.css
header {
  background: #808000;
  text-align: center;
  width: 100%;
  height: 300px;
}

.btn {
  text-decoration: wavy;
  background: #008000;
  color: #ffffff;
  display: block;
  width: 140px;
  line-height: 44px;
  margin: 40px auto 48px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
}

.btn:hover {
  opacity: 0.9;
}

.pic img {
  margin: 0;
  width: auto;
  height: 300px;
}

.features .container {
  width: 800px;
  margin: 0 auto;
}

.features h1 {
  text-align: center;
}

.features ul li {
  text-align: center;
}

.features p {
  text-align: center;
}

.features .uriba {
  width: 800px;
  margin: 0 auto;
}

＜リンク先のHTML＞uriba/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="../icon.png">
    <title>野菜売り場</title>
    <link rel="stylesheet2" href="style2.css">
  </head>
  
  <body>
    <h1>野菜売り場</h1>
    <p>お好みの野菜を選択して買い物カゴに入れて下さい。</p>

    <table border="1">
      <thead>
        <tr>
          <th colspan="4">本日の野菜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>野菜</td>
          <td>金額（1つ）</td>
          <td>数量</td>
          <td>購入</td>
        </tr>
 （中略）
　　　　</tbody>
    </table>
  </body>
</html>

＜リンク先ページのCSS＞uriba/style2.css
body {
	background: #808000;
	margin: 0;
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

m.ts10806

2020/05/23 07:30

実際のコードを提示されないと何とも言えません。

m.ts10806

2020/05/23 07:31 編集

あと、それぞれのファイルの位置関係とアクセスURL

rururu3

2020/05/23 07:32

TOPページのHTMLソースおよびファイル名リンク先のHTMLソースおよびファイル名 CSSのソースおよびファイル名がほしい

anne_0110

2020/05/23 07:44

早速ありがとうございます。情報が不足しており、申し訳ございません。＜TOPページのHTML＞index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="○○農園では自然豊かで水が綺麗な徳島県の農園で栽培した農産物をネット販売しております。"> <link rel="icon" href="icon.png"> <title>○○農園</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="pic"> <img src="img/top.png"> </div> </header> <section class="features"> <section> <div class="container"> <h1>○○農園の紹介</h1> <ul> <li>農園について</li> <li>生産者</li> </ul> </div> </section> <section> <div class="container"> <h1>お野菜のお買い物方法</h1> <p>「売り場」に行って好きなお野菜を選び、数量を洗濯して、「買い物カゴ」に入れます。お買い物金額は自動的に計算され、最後にお会計に進みます。</p> </div> </section> <section class="uriba"> <h1>野菜売り場へGO</h1> <a href="uriba/index.html" target="_blank" class="btn">売り場</a> </section> </section> </body> </html> ＜TOPページのCSS＞css/style.css header { background: #808000; text-align: center; width: 100%; height: 300px; } .btn { text-decoration: wavy; background: #008000; color: #ffffff; display: block; width: 140px; line-height: 44px; margin: 40px auto 48px; font-size: 14px; font-weight: bold; border-radius: 4px; text-align: center; } .btn:hover { opacity: 0.9; } .pic img { margin: 0; width: auto; height: 300px; } .features .container { width: 800px; margin: 0 auto; } .features h1 { text-align: center; } .features ul li { text-align: center; } .features p { text-align: center; } .features .uriba { width: 800px; margin: 0 auto; } ＜リンク先のHTML＞uriba/index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="icon" href="../icon.png"> <title>野菜売り場</title> <link rel="stylesheet2" href="style2.css"> </head> <body> <h1>野菜売り場</h1> <p>お好みの野菜を選択して買い物カゴに入れて下さい。</p> <table border="1"> <thead> <tr> <th colspan="4">本日の野菜</th> </tr> </thead> <tbody> <tr> <td>野菜</td> <td>金額（1つ）</td> <td>数量</td> <td>購入</td> </tr> （中略） </tbody> </table> </body> </html> ＜リンク先ページのCSS＞uriba/style2.css body { background: #808000; margin: 0; font-size: 16px; font-family: Verdana, sans-serif; } よろしくお願いします。