display: flex が効かない

### 前提・実現したいこと

サンプルページを作りたいのですが、display: flex
がサンプルページに反映されないのはなぜでしょうか？？

構文チェッカーでチェックしてみましたが問題ありません。
キャッシュクリアも試してみましたが、解決されないので困ってます。

html

<!DOCTYPE html>
<html lang "ja">

     <head>
         <meta charset="utf-8">
         <title>WCB Cafe</title>
         <meta name="description" content="テキスト">

     <!-- CSS -->
          <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
          <link href="https://fonts.googleapis.com/css?family=philosopher" rel="stylesheet">
          <link href="css/style.css" rel="stylesheet">

     </head>

     <body>
          <header class="page-header">
             <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ ホーム"></a></h1>
             <nav>

               <ul class="main-nav">
                 <li><a href="news.html">News</a></li>
                 <li><a href="menu.html">Menu</a></li>
                 <li><a href="contact.html">contact</a></li>
                 </ul>
              </nav>
            </header>

     </body>
</html>

CSS

     @charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

/* HRADER
----------------------*/
.logo {
  width: 210px;
  margin-top: 14px;
  }    
         
  .main-nav {
      display: flex;
      font-size: 1.25rem;
      text-transform: uppercase;
      margin-top: 34px;
      list-style: none;
  }
  .main-nav li {
      margin-left: 36px;
  }
  .main-nav a {
      color: #432;
  }
  .main-nav a:hover {
      color: #0bd;
  }

yoshinavi

2019/08/25 05:45

提示のコードでは、flexは効いています。（<li>は横並びになっています）提示以外のCSSの影響が考えられるので、デベロッパーツールで適用CSSを確認されると良いかと思います。

行動規範の内容に同意します

回答3件

cssが効かないのは display: flex の部分だけでしょうか？

こちら私の手元では反映されています。

投稿2019/08/25 05:42

mochizuki-pg

総合スコア192

CSSが404かキャッシュの影響で読み込まれていません。
あと構文チェッカーを使用した割にはコードのチェックが甘いです。
lang "ja" => lang="ja"、 HRADER => HEADER

<style>
@charset "UTF-8";

/* 共通部分 */
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
    "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

/* HEADER */
.logo {
  width: 210px;
  margin-top: 14px;
}
.main-nav {
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 34px;
  list-style: none;
}
.main-nav li {
  margin-left: 36px;
}
.main-nav a {
  color: #432;
}
.main-nav a:hover {
  color: #0bd;
}
</style>
<header class="page-header">
  <h1>
    <a href="#"><img
        class="logo"
        src="https://placehold.jp/210x210.png"
        alt="WCBカフェ ホーム"
    /></a>
  </h1>
  <nav>
    <ul class="main-nav">
      <li><a href="#">News</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

投稿2019/08/25 05:39