

均等に横並びに配置するために、下記のようにコードを書いたのですがflexが適用されません。もしこのコードをみて改善策がわかる方がいたら教えてください。  
よろしくお願いします。

[code]

    <nav class="global-nav_items">
        <ul class="nav-list">
            <li><a href="#">menu</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">acess</a></li>
        </ul>
    </nav>
    
[/code]

[code]

    .global-nav_item{
        padding: 40px;
    }
    .global-nav_item .nav-list{
        display: flex;
        justify-content: center;
    }
    .global-nav_item .nav-list>li{
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.1em;
        margin-right: 80px;
        list-style: none;
    }
    .global-nav_item .nav-list> li :last-child{
        margin-right: 0;
    }
    
[/code]


CC BY-SA 4.0
2023-09-08T02:45:25.620
96151
2023-09-08T05:19:25.657
2023-09-08T03:39:43.143
2784
59713
question
html css
flexが効かない


綴りミスではないでしょうか。  
HTMLでは `class="global-nav_items"`、CSS では `.global-nav_item` (`s`がない)となっています。

ブラウザの開発者ツールで `.nav-list` の要素を調べると `display: flex`
が適用されていないことが確認できます。そのことから、`display: flex`
を含むルールセットのセレクタが間違っている可能性が高く、クラス名の不一致に気づけるかもしれません。


CC BY-SA 4.0
2023-09-08T04:17:35.230
96154
2023-09-08T05:19:25.657
2023-09-08T05:19:25.657
3475
3475
96151
answer