floatのやり方など

main-leftの横にmain-rightの要素を持ってきたいのですが、なぜか下に回り込んでしまっています。
こちらが正解の写真です。まだ作成段階ですがそこについて知りたいです。
よろしくお願いします

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/reset.css">
8<link rel="stylesheet" href="./css/style.css">
9<title></title>
10<head></head>
11<body>
12  <div class="wrapper">
13    <div class="header">
14      <div class="header-top">
15        <img src="./img/bg.jpg" >
16      </div>
17        <img src="./img/logo.jpg" >
18      <div class="header-list">
19      <ul>
20        <li>ホーム</li>
21        <li>自己紹介</li>
22        <li>作品</li>
23        <li>お問い合わせ</li>
24      </ul>
25      </div>
26      </div>
27      <div class="main">
28        <div class="main-top">
29          <img src="./img/hero.jpg" >
30          <h1>世界中を旅するフォトグラファーです。</h1>
31        </div>
32        <div class="main-left">
33          <h4>最新の作品</h4>
34          <img src="./img/thumb1.jpg" >
35          <img src="./img/thumb2.jpg" >
36          <img src="./img/thumb3.jpg" >
37          <img src="./img/thumb4.jpg" >
38          <img src="./img/thumb5.jpg" >
39          <img src="./img/thumb6.jpg" >
40        </div>
41        <div class="main-right">
42          <h4>自己紹介</h4>
43          <p>
44            こんにちは、Manaです。世界中を
45            旅しながら写真を撮っています。
46            TwitterやFacebookやってます。
47            お気軽にフォローしてください！
48            ブログもチェックしてみてくださ
49            い。これはデモサイトです。実際
50            は写真苦手です。はい。
51            こんにちは、Manaです。世界中を
52            旅しながら写真を撮っています。
53            TwitterやFacebookやってます。
54            お気軽にフォローしてください！
55            ブログもチェックしてみてくださ
56            い。これはデモサイトです。実際
57            は写真苦手です。はい。
58          </p>
59        </div>
60      </div>
61      <div class="footer">
62        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg ">
63      </div>
64    </div>
65  </div>
66</body>
67</html>

CSS
1.wrapper{
2  background-color: #FFEFD5;
3}
4
5img[src="./img/bg.jpg"] {
6    background-repeat: repeat-x;
7}
8
9.clearfix::after {
10    content : " ";
11    display : block;
12    clear : both;
13}
14
15.header{
16  height: 100px;
17}
18
19img[src$="./img/logo.jpg"] {
20
21}
22
23.header-list{
24  float: right;
25}
26
27.header-list li{
28  float: left;
29  margin-right: 10px;
30  color: #AAAAAA;
31}
32
33li:first-child{
34  float: right;
35}
36
37.main-left{
38  width: 650px;
39}
40
41.main-right{
42  float: right;
43}
44