HTMLにCSSのclass属性が反映されない

前提・実現したいこと

サイトのディベロッパーツールを使って、HTML・CSSの写経を行っています。
全く同じサイトを作り上げることが目標です。（写経のお手本にしているサイトhttps://danblog.tokyo/）

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

トップ部分にて、所々反映されないclass属性があります。
以下反映されないclass属性です。

CSS
1/*ディベロッパーツールで確認した際に反映されていませんでした。*/
2wrap {
3 overflow: hidden;
4}
5
6/*ディベロッパーツールで確認した際に、横線で取り消されていました。*/
7img {
8 border: none;
9 vertical-align: bottom;
10}
11
12/*「蒼乃建設」のロゴ部分です。ディベロッパーツールで確認した際に反映されていませんでした。*/
13.header-logo {
14 height: 40px;
15}
16
17.header-logo {
18 height: 60px;
19}
20
21/*企業理念、施工事例、採用情報、お問い合わせ部分です。ディベロッパーツールでは反映されていましたが、サイトには表示されませんでした。*/
22.header nav {
23 display: none;
24}
25
26.header nav ul {
27 display: flex;
28}
29
30.header-nav ul li {
31 list-style: none;
32 margin: 0 30px;
33}
34
35
36.header-nav ul li a {
37  text-decoration: none;
38  color: #000;
39  font-size: 18px;
40}

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charest="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>蒼乃建設</title>
8 <link rel="stylesheet" href="css/reset.css">
9 <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12  <div class="wrap">
13   <!-- ヘッダー -->
14   <div class="header-wrap">
15    <div class="header-container">
16      <header class="header">
17       <!--　ヘッダーロゴ　-->
18       <h1><a href="#"><img src="img_aono/header_logo.png" alt="蒼乃建設"　class="header-logo"></a></h1>
19       <!--　ヘッダーナビ　-->
20       <nav class="header-nav">
21        <ul>
22         <li><a href="#">企業理念</a></li>
23         <li><a href="#">施工事例</a></li>
24         <li><a href="#">採用情報</a></li>
25         <li><a href="#">お問い合わせ</a></li>
26        </ul>
27       </nav>
28       <div class="header-icon"><img src="img_aono/hamburger.svg" alt="ハンバーガーメニュー"></div>   
29      </header>
30    <!--　ファーストビューの文章　-->
31     <p class="header-main_text">街を作る。未来を作る。</p>
32    </div>
33   </div>
34  </div> 
35</body>
36</html>

CSS
1<style>
2
3wrap {
4 overflow: hidden;
5}
6
7.header-wrap {
8 height: 50vh;   
9}
10
11.header-wrap {
12 background-image: url(../img_aono/main.png);
13 background-repeat: no-repeat;
14 background-size: cover;
15 background-position: center;
16 height: 80vh;
17 position: relative;
18}
19
20.header-container {
21 max-width: 1100px;
22 margin: 0 auto;
23}
24
25.header {
26 padding: 15px 20px;
27}
28
29.header {
30 display: flex;
31 justify-content: space-between;
32 align-items: center;
33 padding-top: 30px;
34}
35
36* {
37 box-sizing: border-box;
38}
39
40title {
41 display: none
42}
43
44.header-logo {
45 height: 40px;
46}
47
48.header-logo {
49 height: 60px;
50}
51
52h1, h2,h3, h5, h6, p, a, li {
53 line-height: 1.2;
54 font-family: 'ヒラギノ明朝　ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'yuMincho', 'Yu Mincho', '遊明朝体', sans-serif;
55}
56
57img {
58 border: none;
59 vertical-align: bottom;
60}
61
62.header nav {
63 display: none;
64}
65
66.header nav ul {
67 display: flex;
68}
69
70.header-nav ul li {
71 list-style: none;
72 margin: 0 30px;
73}
74
75
76.header-nav ul li a {
77  text-decoration: none;
78  color: #000;
79  font-size: 18px;
80}
81
82.header-icon {
83 display: block;
84 font-size: 28px;
85}
86
87.header-main_text {
88 font-size: 24px;
89}
90
91.header-main_text {
92 position: absolute;
93 top: 50%;
94 left: 50%;
95 transform: translate(-50%);
96 width: 100%;
97 text-align: center;
98 font-size: 48px;
99}
100
101</style>
102

試したこと

・style.cssのパスを正しく書く。
・お手本のサイトのディベロッパーツール通りに書き直す。
・chromeのキャッシュを削除、スーパリロード。
・HTMLのclass名とCSSのセレクタ名の綴りを合わせる。
・CSSの書き方を調べて、正しく書く。

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

お手本サイトと建設会社は架空のものです。

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

回答1件

css
1/*ディベロッパーツールで確認した際に反映されていませんでした。*/
2wrap {
3 overflow: hidden;
4}

こう書くと、<wrap>というタグに適用するという意味になってしまいます。クラスとは無関係です。

投稿2021/12/05 05:57

maisumakun

総合スコア145184

maisumakun

2021/12/05 05:58

あと、（全角スペース）class=となっていて、正しくclass属性だと認識されていない箇所があります。

maisumakun

2021/12/05 06:06 編集

> サイトには表示されませんでした。 display:noneだから、「表示されない」のが書いた通りの結果なのではないでしょうか。

ykn_

2021/12/06 00:50

wrapの前にピリオドがなかったので、追加しましたが、デベロッパーツールには反映されませんでした。全てのclassの前のスペースを半角にしましたが、class属性は反映されませんでした。サイトに表示されない部分は、画面の大きさに合わせて文字のメニューとハンバーガーメニューが表示される方法を探そうと思います。コメントしていただき、ありがとうございました。

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