要素が横並びになって表示されてしまう。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

plogate プログラミングとは　学べるレッスン　お問合せ　の4項目を横並びにして改行して、その下にHELLO WROLD.と表示したいのですが、plogate プログラミングとは　学べるレッスン　お問合せ　HELLO WROLD と横並びになってしまいます。
<div>などのブロックレベル要素をつかうと、CSSで横並びにしたい要素にfloat:left;としない限り、改行され下へ下へ要素が追加されていくのではないんですか？

該当のソースコード

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=logo>
11        <h2>Plogate</h2>
12      </div>
13      <div class=sub>
14        <ul>
15          <li>プログラミングとは</li>
16          <li>学べるレッスン</li>
17          <li class=otoi>お問合せ</li>
18        </ul>
19      </div>
20    </div>
21    <div class="main">
22      <h1>HELLO WORLD<span>.</span></h1>
23      <h2>プログラミングの世界にようこそ
24
25    </div>
26    <div class="footer">
27    </div>
28  </body>
29</html>
30
31CSS
32.logo{
33  float:left;
34  font-size: 18px;
35  padding:0px 20px;
36background-color: green;
37}
38li{
39  list-style: none;
40  padding:29px 20px;
41background-color: green;
42float:left;
43}
44.otoi{
45  padding-right: 100px
46}
47
48### 試したこと
49
50ここに問題に対して試したことを記載してください。
51
52### 補足情報（FW/ツールのバージョンなど）
53
54ここにより詳細な情報を記載してください。