HTMLでクラス設定したものにCSSの記述が適応しない。

上記の画像（左にHTML右にCSS）のようにクラス"main-nav"を設定しているのですが
CSS側の
.main-nav a{
color:#432;
}
以下の部分が適応せず文字色が変わりません。（＃４３２は黒に近い色のはずだが、カーソルを合わせていなくても青に見える。）
.main-nav li{}の部分は適応しています。

間違い箇所が分かる方、ご教授お願いします。

######追記　現在のHTML,CSS,ブラウザ表示の状態です。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>WCBCafe</title>
6    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7
8
9
10    <!--CSS-->
11    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
12    <link href="https://font.googleapis.com/css?family=philosopher" rel="stylesheet">
13    <link href="css/style.css" rel="stylesheet">
14
15  </head>
16
17  <body>
18    <header class="page-header wrapper">
19      <h1>
20        <a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBCafeホーム画面"></a>
21      </h1>
22
23      <nav>
24        <ul class="main-nav">
25          <li><a href="news.html">News</a></li>
26          <li><a href="menu.html">Menu</a></li>
27          <li><a href="contact.html">Contact</a></li>
28        </ul>
29      </nav>
30
31    </header>
32
33    <div class="home-contact wrapper">
34      <h2 class="page-title">We`ll Make Your Day</h2>
35      <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
36      <a class="button" href="menu.html">メニューを見る</a>
37    </div><!-- /.home-content-->
38
39
40  </body>
41
42</html>
43

css
1@charset "UTF-8";
2/*共通部分
3ーーーーーーーーーーーーーーーーーーーーーーー*/
4/*header
5--------------------------------------*/
6
7html{
8  font-size: 100%;
9}
10body{
11  font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;;
12  line-height: 1.7;
13  color:#432;
14}
15a{
16  text-decoration: none;
17}
18img{
19  max-width: 100%
20}
21.logo{
22  width:210px;
23  margin-top:14px;
24}
25.main-nav{
26  display: flex;/*中の<li>タグを横並びにする*/
27  font-size: 1.25rem;
28  text-transform: uppercase;    /*これは何だろう？*/
29  margin-top:34px;
30  list-style:none;
31}
32.main-nav li{
33  margin-left:36px;
34
35}
36.main-nav a{        　/*メインメニューの色*/
37  color:#432;
38}
39.main-nav a:hobor{  /*カーソルを合わせたときの処理*/
40  color:#0bd;
41}
42.page-header{
43  display: flex;
44  justify-content: space-between;
45}
46.wrapper{
47  max-width: 1100px;
48  margin:0 auto;
49  padding:0 4%;
50}
51
52/*HOME
53------------------------------------*/
54.home-content{
55  text-align: center;
56  margin-top:10%;
57}
58.home-content p{
59  font-size: 1.125rem;
60  margin:10px 0 42px;
61}
62

Hiro527

2020/03/13 04:28

この状態でどうUIが表示されているかのスクリーンショットを添付するべきだと思います。

konbu-3

2020/03/13 04:43

アドバイスありがとうございます。全体像を追記してみました。

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

回答2件

ベストアンサー

CSS
1/*                  ↓ 全角空白   */
2.main-nav a{        　/*メインメニューの色*/
3  color:#432;
4}

投稿2020/03/13 04:46

kei344

総合スコア69400

konbu-3

2020/03/13 04:48

ご指摘ありがとうございます。全角のものがあるとエラーになるんですね；全角箇所を探す方法も調べてみます。解決しましたので、ベストアンサーに選ばせていただきました。

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

原因は指摘にあった通り、CSS内に全角スペースがあったことでした。

初歩的なケアレスミスなので今後同じことが起こらないように
テキストエディタAtomの「show-ideographic-space」パッケージを入れました。

これで全角スペースの可視化ができるようになったので
解決とさせていただきます。

全角スペースを見つけてくださった方をベストアンサーに選ばせていただきました。

投稿2020/03/13 04:57

konbu-3

総合スコア9

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

HTMLでクラス設定したものにCSSの記述が適応しない。

関連した質問