画面縮小した時にレイアウトが重なるのを重ならないようにしたい。

前提・実現したいこと

練習として映画情報サイトを作り始めました。
画面縮小したときに、サイドバーであるHOME・NEWSとタイトル【仕事に恋愛ときどき映画】が
重なってしまいます。
画面縮小したときに2つが重ならないように表示させたいです。
レスポンシブデザインを調べて色々試したのですが上手くいきませんでした。
どうかご教示いただければ幸いです。

該当のソースコード【HTML】

<!DOCTYPE html> <html> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="eiga/eiga.css"> <meta charset="utf-8"> <title>翔平</title> </head>  <body> <div class"main"> <header id="header" > 　　 <h1>仕事に恋愛ときどき映画</h1> <h2>～映画好きのための場所～</h2> 　　</header> </div> <ul id="gazou"> <li><img src="C:\Users\範一\Desktop\映画紹介\eiga\ダウンロード.jpg" width="400" height="400"</li> <li><img src="C:\Users\範一\Desktop\映画紹介\eiga\パイレーツ.jpg" width="400" height="400"</li> </ul>

<aside>
 <nav>
  <ul>
   <li><a href="">HOME</li>
   <li><a href="">NEWS</li>
  </ul>
 </nav>
</aside>

</body> <!-- ここまでナビゲーションエリア> </html>

該当のソースコード【CSS】

header{
width:auto;
height:80px;
background-color:#1e93c1;
font-size:3em;
text-align : center;
}

body {
background-image: url("../eiga/Aurora.jpg")
}

body { background-size: cover;
}

header h1,h2 { font-family: 'Kaisei Decol', serif;
}

header h1 { color: #FFFFFF;
}

header h2 { color: #FFFFFF;
}

.main {
width: 90%;
float:right;
border:4px solid red;
box-sizing: border-box;
}

aside{ font-size: xx-large;
font-family: 'Kaisei Decol', serif;
color: #FFFFFF;
}

aside {
width: 10%;
float:left;
border: 4px solid; #031de2;
box-sizing: border-box;
}

a {
color:#FFFFFF;
}

#gazou{
display: flex;
flex-wrap:wrap;
}
#gazou li {
width: calc(100%/4);/←画像を横に4つ並べる場合/
padding:0 5px;/←画像の左右に5pxの余白を入れる場合/
box-sizing:border-box;
}
#gazou li img {
max-width:100%; /画像のはみだしを防ぐ/
height: auto; /*画像の縦横比を維持 */
border:solid 1px #ccc; /←画像を1pxのグレーの枠線で囲む指定の場合/
}