htmlにcssが反映されない

前提・実現したいこと

html cssでwriteの模写を行っております。

<div class="contact">こちらのclassがcssに反映されません。原因がわかりません。宜しくお願いいたします。

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

エラーメッセージ

該当のソースコード

html
ソースコード

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <link rel="stylesheet" href="practice.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://kit.fontawesome.com/1ea49d1623.js" crossorigin="anonymous"></script> </head> <body> <header> <div class="contact"> <div class="header-left"> <h1><a href="#">write</a></h1> <p>書くためのテーマ</p> </div> <div class="header-right"> <div class="header-nav"> <ul class="contact"> <li><a href="#">ホーム<span class="fas fa-angle-down"></span></a></li> <ul> <li><a href="#">→カスマイズ</a> </li> </ul> </li> <li><a href="#">ページ<span class="fas fa-angle-down"></span></a></li> <ul> <li><a href="#">アイキャッチ画像なしのページ</a></li> <li><a href="#">ページ（全編テンプレート）</a></li> </ul> </li> <li><a href="#">タイポグラフィ</a></li> <li><a href="#">お問い合わせ</a></li> </ul>

                </div>
            </div>
        </div>
    </div>
</header>

</body> </html> ```css

コード

a {
    text-decoration: none;
    color:#444444;
}
ul{
    list-style:none;
}

header{
    height:152px;
    margin:50px;
    width:100%;
}

.container{
    width: 1040px;
    margin:0 auto;
}
.header-left{
    float:left;
}
.header-left h1{
    font-size:36px;
    line-height:42px;
}
.header-left p{
    font-size:18px;
}
.header-right{
    padding-top:42px;
    float:right;
}
.fas{
    margin-left: 10px;
}
.contact li{
    float:left;
    font-size:16.88px;
    padding:0 15px;
    position: relative;
}

.contact li ul{
    position: absolute;
    top: 45px;
    left: -5px;
    height: 0;
}


### 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Daregada

2020/12/15 14:19

CSSがどうこう言う前に、HTMLの内容がめちゃくちゃです。・ul要素の内容に直接ul要素を書いてはいけません。・li要素の終了タグだけが書いてあり、バランスが取れていません。・div要素の終了タグだけが書いてあり、バランスが取れていません。

aoten.

2020/12/15 14:25

回答ありがとうございます。もう一度基本的なことから見直します。

m.ts10806

2020/12/15 19:27

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 あと紛らわしいですが「終了タグが省略できるケース」があります。 https://agohack.com/html-closetags/ ※もちろん紛らわしいので積極活用はしないほうがいいかもしれませんが。

m.ts10806

2020/12/15 19:30

しかし .contact に対する指定はないですよね。配下のみです。構文的なところは構文チェック機能のあるエディタ（プラグイン含む）か構文チェックサービスを利用しましょう。 http://www.htmllint.net/html-lint/htmllint.html ※CSSも探せばあります。

Lhankor_Mhy

2020/12/16 01:35

『classがcssに反映されません』とのことですが、具体的にはどのような現象を見てそのように思いましたか？

FKM

2020/12/16 04:21

.contactの孫要素は指定していますが、.contactそのものの定義がどこにもない気がするんですが…

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！