<li></li>タグの上に、他の要素が回り込む現象が起きて改善できません。

前提・実現したいこと

初めて利用します。よろしくお願いします。

ポートフォリオサイトを作成中なのですが、現在２つの問題が生じていて、改善ができていない状態になります。
①ヘッダータグの中にリストタグを作成し、その下にテキストを入力したところ、入力したテキストがリストタグの上に表示される。
②ヘッダー上部に表示するロゴの画像にclassを当てようとしたところ、<img src="" class="">形式の入力では反映されず、<div class=""><img sec=""></div>の形で入力すると反映される。

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

エラーメッセージ

該当のソースコード

HTML

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Portfolio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="logo"><img alt="中華料理ロゴ" class="logo-img logo" src="imgs/chinesefood-logo2.png"></div> <nav> <ul> <li>Home</li> <li>About</li> <li>Works</li> <li>Service</li> <li>Contact</li> </ul> </nav>

<div class="lunch">bbbbb</div>

</header>

<div style="clear: both">aaaaa</div>

<div class="main"> <div class="box3-1"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="box3-1"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="box3-2"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="box3-1"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="box3-1"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> <div class="box3-2"><img class="photo" src="imgs/aoiiruka.png">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> </div> </body> </html>

CSS

@charset "UTF-8";
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* CSS Document */

main{
float:left;
width:100%;
text-align:center;
}

li{
list-style:none;
text-align: center;
margin-right:28%;
margin-bottom:10px;
margin-bottom:20px;
}

.head{
width:100%;
margin-left:auto;
margin-right:auto;
}

.logo-img{
width:100px;
margin-top:20px;
text-align:center;
}

.logo{
text-align:center;
}

header{
height:100px;
background-color:white;
width:100%;
}

nav {
font-family: 'Quicksand', sans-serif;
margin-top: 30px
}
nav ul {
list-style: none;
text-align: center
}
nav li {
display: inline;
padding-left: 30px;
padding-right: 30px;
border-left: 1px solid #cccccc;
letter-spacing: 10px
}
nav li:last-child {
border-right: 1px solid #cccccc
}

.top-img{
text-align:center;
}

.top-image{
width:100%;
height:200px;
object-fit: cover;
}

.box3-1{
width: 300px;
height: 250px;
float: left;
margin-right: 50px;
object-fit: cover;
margin-bottom:50px;
margin-top:50px;
}

.box3-2{
width: 300px;
height: 250px;
float: left;
margin-bottom:50px;
margin-top:50px;
}

.main{
clear:both;
width:1000px;
margin-right:auto;
margin-left:auto;

}

.photo{
width:300px;
height:auto;
}

.lunch{
margin-left:auto;
margin-right:auto;
}

試したこと

①に対して
・テキスト「aaaaa」と書いてある部分(28行目)の部分だと回り込むため、「bbbbb」（24行目）に記載したところ、回り込まないですが、場所がヘッダー内となってしまうため、「aaaaa」にclear:bothを指示したところ効果なし。
また、こちらに関しては、もともとヘッダー部分のすぐ下にトップ画像をwidth:100%で配置する予定でしたが、作成途中でなぜかリストの上に画像が重なる現象も起きました。

②にたいして
<img class="">という形でcssをいくつか指示したのですが、なぜか<div class=""></div>の形で入力しないとcssが適用されませんでした。

補足情報（FW/ツールのバージョンなど）

コードを書く際にはDreamweaver2021、検証にはGoogle Chromeを使用しております。

行動規範の内容に同意します

回答1件

ベストアンサー

①ヘッダータグの中にリストタグを作成し、その下にテキストを入力したところ、入力したテキストがリストタグの上に表示される。

この原因は、

css
1header{
2height:100px;

とheaderの高さを100pxにしているので、次の要素が上から100pxの位置に配置されます。
headerの中身の画像やリスト要素の高さは100px以上あるので、100pxの高さからはみ出して表示されます。
そのため重なってしまいます。
height:100px;を削除すれば重ならないようになります。