VScodeのHTML previewでcssが反映されない

VScode のhtml preview を使用しているのですが、ＣＳＳが反映されません。

live preview モードでブラウザでみると　css が反映しているのですが、同様のプレビューをhtml preview でも
再現したいです。

どのようにしたらＣＳＳが反映されますでしょうか？

html preview 上の表示

ブラウザ上の表示

同様の質問があり、
vscode の再起動

等を試しましたが駄目でした。

html のソースは下記になります。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="flex_test-box">
        <div class="flex_test-item">
            1.コンテンツが入ります。コンテンツが入ります。
        </div>
        <div class="flex_test-item">
            2.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
        </div>
        <div class="flex_test-item">
            3.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
        </div>
        <div class="flex_test-item">
            4.コンテンツが入ります。
        </div>
    </div>
    <p>aaaaaa</p>
</body>
</html>

.flex_test-box {
    display: flex;              /* フレックスボックスにする */
    background-color: #eee;     /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
}
 
.flex_test-item {
    padding: 10px;
    color:  #fff;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}
 
.flex_test-item:nth-child(1) {
    background-color:  #2196F3; /* 背景色指定 */
}
 
.flex_test-item:nth-child(2) {
    background-color:  #4CAF50; /* 背景色指定 */
}
 
.flex_test-item:nth-child(3) {
    background-color: #3F51B5; /* 背景色指定 */
}
 
.flex_test-item:nth-child(4) {
    background-color:  #00BCD4; /* 背景色指定 */
}

m.ts10806

2021/07/18 10:00

画像で提示されても他者は再現確認取れません。テキストで、マークダウンのcodeにてご提示ください。

BeatStar

2021/07/18 10:29

画像での質問はやめましょう。識別しづらいし、仮に識別できても「再現率が低くなる」です。例えば「半角スペースにすべきところを全角スペースにしてしまっていることが原因」だったりする。そうなると「わからない」となります。だって、そういう場合は反転させないとわからないのでわかるわけないじゃないですか。それを「プロなんだからわかるだろ」はもはや暴言です。まずは質問方法を工夫しましょう。

niconic73027793

2021/07/18 10:36

失礼しました<(_ _)> コードを追記しました。

BeatStar

2021/07/18 10:38 編集

(ダブったようなので下に書く)

BeatStar

2021/07/18 10:39

コードのボタンのやつは2か所以上でもできるので、CSSの方もやった方がいいですよ。

niconic73027793

2021/07/18 10:46

ＣＳＳの方もコードボタンで記述してみました。

BeatStar

2021/07/18 10:48

Good

BeatStar

2021/07/18 10:49

ファイルパスとかはあっていますか？

niconic73027793

2021/07/18 11:06

はい。 C:\Users\info\Desktop\vscode\header menu\index.html C:\Users\info\Desktop\vscode\header menu\style.css 上記においてます。ブラウザのライブプレビューではＣＳＳ反映されてできるので、問題無いと思うのですが、 html 　previewのプラグインを使った表示だと上手くいかないんですよね。