2つのコードの違いが分かりません

前提・実現したいこと

プログラム初心者で、Progateのレッスンに従い、簡単なコードを書いています。

発生している問題・エラーメッセージ

下記のHTMLに対応するCSSのコード「１」と「２」の違いが何なのか分かりません。
「１」は私が書いたもので、「２」はProgateの解答です。
<div class="header-list">は<li>を含んでいるので<div class="header-list">にまとめて書いてみたのですが、正解のイメージとは異なってしまいます。
リストの仕様変更する際には、必ず　.○○ li {}で書かなければ、反映されないのでしょうか。

該当のソースコード

HTML
1
2 <body>
3         <header>
4            <div class="header-logo">犬</div>
5            <div ="header-list">
6                <ul>
7                    <li>柴犬</li>
8                    <li>プードル</li>
9                    <li>コーギー</li>
10                </ul>
11            </div>
12         </header>
13     </body>
14
15以下CSS(「１」と「２」の違いが分かりません)
16「１」
17.header-list {
18    float: left;
19    padding: 33px 20px;
20}
21
22「２」
23.header-list {
24  float: left;
25}
26
27.header-list li {
28  float: left;
29  padding: 33px 20px;
30}
31
32

m.ts10806

2018/08/10 21:41

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

m.ts10806

2018/08/10 21:44 編集

「発生している問題・エラーメッセージ」に書かれている内容は要件となると思います。コードブロック内に書かれていますが、あくまソースコード、エラーメッセージを挿入するためのものなので文章は外にだしてください。あとできればhtmlとCSSはコードブロックをわけていだけると助かります（その際、補足のコメントも外にだしてください。コードではありませんし）

m.ts10806

2018/08/10 21:46

別途気づきですが、htmlの方、<div ="header-list">ではなく<div class="header-list">かと思います。転記される場合は正しく転記しないと回答者が現象の再現確認がとれません。