レイアウトの問題についてのアドバイスを求める_html/css_WEB-ITnose

1枚目は100%で撮影しており、左側とヘッダータイトルは正常に表示されていますが、2枚目のように50%に縮小すると左側とヘッダーが異常に表示されます問題は何ですか?
コードは次のとおりです。
text-align:center;
background-color:#f4f4f5;
.div_top{
幅:1000px;
マージン:0 自動;
.div_left{
幅:150px; :500px;
}
.div_top_img{
幅:100px;
高さ:100px;
.div_top_nav ul{
幅:500px;
マージン:0 0 0 200px;
}
.div_top_nav li{
display:inline-block:0 30px 0 0; 20px;
font-weight:bold;
line-height:100px;
.div_top_nav a:link{
text-decoration:none; 🎜>幅:100px;
高さ:100px;
色:黒;
.div_top_nav a:visited{
display:block;
テキスト装飾:なし;
高さ:100ピクセル;
色:黒; :hover{
背景色:グレー;
}
.div_top_nav a:active{
背景色:グレー;
}
.div_left ul{
ボーダー: 1px ソリッド #cdcdcd;
マージン:0;
justify-content:flex-start; -style-type:none;
}
.div_left a{
line-height:250px;
.div_left a:link{
表示:ブロック;幅:74px;
テキスト装飾:なし;
}
.div_left{
カラー:黒; }
.div_left a:hover{
background-color:red;
}
上記は CSS スタイルです

a>

• アニメ


• a>