回り込んでしまいます....

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>CARRY</title>
6  <link rel="stylesheet" type="text/css" href="carryhp.css">
7  <meta name="viewport" content="width=device-width,initial-scale=1">
8</head>
9<body>
10
11<div class="container">
12  <div class="topwrapper">
13
14    <div class="first-line">
15      <div>
16        <ul>
17        <li><img class="yelwrap" src="yellow.png"></li>
18        <li><a href="#"><img class="btn" src="over.png" alt="キャリー"></a><li>
19        <li><img class="redwrap" src="red.png"></li>
20        </ul>
21
22      </div>
23
24    </div>
25
26    <div class="second-line">
27      <div>
28        <ul>
29        <li><a href="#"><img class="dreamwrap" src="dream.png" alt="dream"></a><li>
30        <li><img class="carry" src="carry.png"></li>
31        <li><a href="#"><img class="member" src="member.png" alt="キャリー"></a><li>
32        </ul>
33
34      </div>
35
36    <div class="third-line">
37
38    </div>
39
40  </div>
41</div>
42
43</body>
44</html>
45コード

css
1*{
2	padding:0;
3	margin:0;
4}
5
6.container{
7	background-color: yellow;
8}
9
10.topwrapper{
11	background-color:blue;
12	height:100vh;
13	margin: 0 auto;
14	width:900px;
15}
16/*ここから１列目*/
17.first-line{
18	background-color:red;
19	height:40vh;
20}
21.first-line img{
22    height:40vh;
23}
24.first-line ul{
25	list-style: none;
26}
27.first-line li{
28	float: left;
29}
30.yelwrap{
31	width:350px;
32}
33.btn{
34	width: 200px;
35}
36.redwrap{
37	width:350px;
38}
39
40
41/*ここから二列目*/
42.second-line{
43	background-color:green;
44	height:20vh;
45}
46.second-line img{
47	height:20vh;
48}
49.second-line ul{
50	list-style: none;
51}
52.second-line li{
53	float:left;
54}
55.dream{
56	width:350px;
57}
58.carry{
59	width:200px;
60}
61.member{
62	width:350px;
63}
64img{
65	vertical-align: bottom;
66}
67
68
69.third-line{
70	background-color:black;
71	height:40vh;
72}
73コード