

練習でHPを作成しているのですが、横並びになりません。  
一体何が原因なのか詳しいかた教えていただきたいです。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>company</title>
    <meta name="description" content="会社の活動についてのサイト">
    <link rel="stylesheet" href="https://unpkg.com/ress.min.css">
    <link href="https://fonts.googleeapis.com/com/css?family=Philosopher" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    
    </head>
    
    <body>
    <header class="page-header">
    <h1><a href="index.html"><img class="logo" src="images/th.jpeg" alt="会社ロゴ">
    </a></h1>
    <nav>
    <ul class="main">
    <li><a href="index.html">Home</a></li>
    <li><a href="concept.html">Concept</a></li>
    <li><a href="fee.html">fee</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="active.html">Active</a></li>
    <li><a href="mail.html">Mail</a></li>
    </ul>
    </nav>
    </header>
    
    </body>
    </html>
    
[/code]

[code]

    @charset "utf-8";
    
    html{
    font-size: 100%;
    }
    
    body {
    font-family: "Yu Gothic Medium","ゴシック　medium", YuGothic,"ヒラギノ角ゴ　Pro W3",
    "sans-serif";
    line-height: 1.7;
    color: #432;
    }
    
    a{
    text-decoration: none;
    }
    
    img{
    max-width: 5%;
    }
    
    .logo{
    width: 5px;
    margin-top: 14px;
    }
    
    .main   {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
    }
    
    .main li{
    margin-left: 36px;
    }
    
    .main a{
    color:#432
    }
    
    .main a:hover{
    color:#0bd;
    }
    
    .page-header {
    display: flex;
    }
    
[/code]


CC BY-SA 4.0
2020-10-27T20:12:53.727
71545
2020-10-28T08:22:59.343
2020-10-28T00:41:05.497
3060
42496
question
html css
ナビゲーションメニューが横並びになりません。


cssのファイル(style.css)が`css`フォルダに無いからでは？  
以下のようなファイル・フォルダ構成になっていますか？  
(ただしフォルダ名に「フォルダ」とか付いているのは説明のためなので実際には不要)

[code]

    /サイトのルートフォルダ
        index.html
        concept.html
        fee.html
        blog.html
        active.html
        mail.html
        /css フォルダ
            style.css
        /images フォルダ
            th.jpeg
    
[/code]

また、[マルチポスト先](https://teratail.com/questions/300806)では画面更新したか？等のコメントが付いているようです。

* * *

マルチポスト先に質問者のコメントがあり、実は質問の元ファイル?/パス?に全角文字が混入していたそうです。

> 原因がわかりました。既存のCSSファイルのスペルが一部全角で打たれていて、それが原因でリンクしていませんでした！


CC BY-SA 4.0
2020-10-28T03:16:25.973
71549
2020-10-28T08:22:59.343
2020-10-28T08:22:59.343
26370
26370
71545
answer