ＣＳＳが反映されません

ＣＳＳが全く反映されません。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8"> <mata name="dscription" content="サンプルサイトの紹介"> <mata name="keywords"　content="恵比寿のホームページ、デザインサイト"> <link ral="stylesheet" href="css/style.css"> <title>恵比寿のホームページ</title> </head> <body> <div id="container"> <div id="header">あ</div> <div id="navi"> <ul> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> </div> <div id="content">い</div> </div> </body> </html> ------------------------------------------------------------------------ CSS @charset "utf-8"; /* CSS Document */ body, div, h1, h2, h3, h4, p, ul, li, dl, dd, dt, img { margin: 0; padding:0; line-height: 1.0; }

h2{ clear:left; padding:20px; text-align:center;}
ul {list-style: none;}
a{ text-decoration:none;}

img { border: none;vertical-align: bottom;}

/body/
body{ width:960px; height:1400px;}
#container{ width:960px; height:2000px; margin:0 auto; background:#666;}
#navi{ width:960px; height:250px; }
a{ text-decoration: none;}
#navi{ list-style:none; overflow:hidden;}
#navi li{ width:140px; text-align:center; background-color:#333; float:left;}
#navi li a{text-decoration:none; font-weight:bold;}

試したこと

ブラウザでソースコード表示させＣＳＳをクリックすると上記ＣＳＳが表示されました。

とても困っているのでわかる方お願いいたします。
※ドリームウェバーにて作成しています。

dit.

2020/02/10 01:57

teratailではコードを見やすくする仕組みがあります。 https://teratail.com/help/question-tips#questionTips3-5-1 コード部分を選択し、<code>ボタンを押してください。 ```html ここにHTMLのコード ``` 1行以上開ける ```css ここにCSSのコード ``` の形にしてください。

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

回答2件

ベストアンサー

HTMLやCSSに関するトラブルは、
teratailに質問する前にvalidationサービスを試すと早く解決できることがありますので、
まず試しましょう。

The W3C Markup Validation Service

これだけポンコツなHTMLだとCSSだって利かないでしょうね。
へんなところに全角空白が放置されていたり、
metaがmataとかrelがralとか。

直してみたものが、こちらになります：

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="dscription" content="サンプルサイトの紹介">
6<meta name="keywords" content="恵比寿のホームページ、デザインサイト">
7<link rel="stylesheet" href="css/style.css">
8<title>恵比寿のホームページ</title>
9
10</head>
11<body>
12<div id="container">
13<div id="header">あ</div><!--header-->
14<div id="navi">
15<ul>
16<li>list1</li>
17<li>list2</li>
18<li>list3</li>
19<li>list4</li>
20</ul>
21</div><!--navi-->
22<div id="content">い</div><!--content-->
23</div><!--container-->
24</body>
25</html>