HTML　横並びの際の疑問点について

こんにちわ　htmlを1週間前に勉強し始めたものです。
質問があります。
こちら下記のコードがCSSファイルで、横並びにする場面で疑問点があります。
下記のような書き方で問題はありませんが、何故「li」で一度float:left;コードの設定を行っているのに.header-list
でもう一度float:left;
の設定を行わなければならないのでしょうか？　「li」でfloat:left;を設定した際、.header-list
でfloat:left;の設定をしなくても、見た目は変わらなかったです。

　何故「li」でfloat:left;を設定した際.header-listでfloat:left;の設定をしなければいけないのか疑問に思っています。型に従えと言われればしょうがないですが、何か理由があるのであれば是非教えていただきたいです。返答お待ちしております。

※progateで勉強しております

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8   <body>
9    <div class="header">
10     <div class="header-logo">Progate</div>
11      <div class="header-list">
12        <ul>
13          <li>プログラミングとは</li>
14          <li>学べるレッスン</li>
15          <li>お問い合わせ</li>
16        </ul>
17      </div>
18     </div>
19
20     <div class="main">
21      
22    </div>
23
24    <div class="footer">
25      
26    </div>
27  </body>
28</html>
29

CSS
1body {
2  font-family:"Avenir Next";
3}
4
5.header {
6  background-color: #f7f2b4;
7  height: 90px;
8}
9
10li {
11  float:left;
12  list-style:none;
13}
14.header-logo {
15  font-size:36px;
16  float:left;
17}
18.header-list {
19  float:left;
20}
21
22
23.main {
24  background-color: #bdf7f1;
25  height: 600px;
26}
27
28.footer {
29  background-color: #ceccf3;
30  height: 270px;
31}