Flexboxで要素を横並びにしたいが、プレビューに実装されない。。。

HTML　コード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>TECHWAVE</title>

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Seymour+One" rel="stylesheet">

</head> <body> <div class="header"> TECHWAVE </div> <div class="menu"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">NEW</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">PRICE</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div class="contents"></div> <div class="footer"></div> </body> </html>

CSS　コード
html {
font-family: "yuGothic", sans-serif;
box-sizing: border-box;
}

.header {
height: 50px;
background-color: #0072BB;

padding-left: 20px;

font-family: "Seymour One", sans-serif;
font-size: 20px;
color: #F9CB40;
line-height: 50px;
letter-spacing: 1px;
}

.menu {
height: 40px;

background-color: #87ceeb;

}

.menu ul {
display: flex;
justify-content: center;
}

.contents {
height: calc(100vh - 140px);
background-color: #b0e0e6;
}

.footer {
height: 50px;
background-color:#0072BB;
}

要素を横並びに中央に並べようとしたのですが、縦並びのままです。。。
コードは間違ってないと思うのですが、プレビューに実装されません。以前もプレビューの文字色が変わらず、困っていたのですが、一度AWSを閉じると解決したことがありましたが、今回はダメでした。。

コードの問題でしょうか？プレビューの問題でしょうか？

ご指摘、訂正して頂けると幸いです。

kei344

2019/08/16 07:02

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「プレビュー」とは何の機能でしょうか。何らかのCMSでしょうか、開発環境の特定ソフトの機能でしょうか。