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も探せばあります。