flexboxのjustify-content:space-betweenができません

コード
```### 前提・実現したいこと
flexboxのjustify-content:space-between;をしたい

■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ
子要素どうしがくっついたままになります

該当のソースコード

HTML

<header>
<div class="container f-box">
<div class="header-logo">
<a href="#"><img src="./catimage/logo.svg" alt="MUNCHKIN-logo"></a>
</div>
<div class="header-list">
<nav>
<ul class="f-box2">
<li class="f-box2item">
Skill
</li>
<li class="f-box2item">
About
</li>
<li class="f-box2item">
Content
</ul>
</nav>
</div>
</div>

</header> のf-box2の部分です ```ここに言語を入力 CSS3 ``` ul{ list-style: none; } .f-box{ display:flex; } .f-box2{ display: flex; flex-direction:row; justify-content: space-between; } ### 試したこと justify-contents pace-betweenが効かないとググってその原因となることを調べた。自分のコードに特に問題が見当たらなかった。他の人のコードをまねして同じように書いたがうまくいかなかった。

よろしくお願いします！！
何か不足している情報があれば指摘してください！

yoshinavi

2019/08/12 20:39

各コードはヘルプ等を参考に「コードブロック」としてください。提示のコードはいくつかタイポ（誤記述）が見られます。修正してみてください。 HTMLに関連するCSSは、全て提示してください。

marlboro_tata

2019/08/12 23:45

space-between が効くためには、display:flex のかかった要素内の子要素が、それぞれの幅を保って並んだ上で「余分なあまりの空間がある」ときに、そのあまりの空間を振り分けるものです。今、その「あまりの空間」がないので、くっついてしまっているように見受けられます。まず、HTMLコードの記載間違いを修正しましょう。次に、一気にレイアウトを仕上げてしまうのではなくて、入れ子になっている中身の部分などから順にCSSをいっこずつ書いて挙動を確かめつつ、進みましょう。（.f-boxのflexに影響を受けて.f-box2の幅が十分に確保されていないように見えます）

sakana_motoki

2019/08/13 16:04 編集

yoshinaviさんコードブロックしました。不慣れですみません。 CSSは現段階ではこれだけです。下の方にご指摘いただいた通りレイアウトを一気にやってからCSSをしていたのでこのようなことになってます以後気をつけます。タイポは<li>にclassを与えるのを忘れていました。その他にも何かありましたか？ご指摘ありがとうございます

sakana_motoki

2019/08/13 16:07

marlboro_tataさん納得のいく説明をしていただきありがとうございました！かなり単純な問題だったんですねまた、今までのやり方が間違っていたようなのでこれを機に改めようと思います。 <li>にクラスを与えていない以外の記載間違いはありましたか？ご指摘ありがとうございました！

marlboro_tata

2019/08/17 09:45

<li class="f-box2item"> Content </ul> この部分で Contentの後に</li>の閉じタグが足りないといえば足りないのですが、そもそも省略可能でもあるので間違いとはいえないですかね（気持ち悪いですが・・・・）記述間違い探しにはW3CのHTMLバリデーション（https://validator.w3.org）などを利用するか、バリデーション機能のあるエディタソフトを使うのが良いと思います〜。