求教布局问题_html/css_WEB-ITnose

第一张是100%时候的，左边和头部标题都正常显示，但像第二张一样缩小为50%时候时，左边和头部都显示不正常了，使什么问题
代码是这样的：
 body{
text-align:center;
margin:0 auto;
background-color:#f4f4f5;
}
 .div_top{
width:1000px;
height:100px;
margin:0 auto;
}
.div_left{
width:150px;
height:500px;
}
.div_top_img img{
width:100px;
height:100px;
float:left;
}
 .div_top_nav ul{
width:500px;
margin:0 0 0 200px;
}
 .div_top_nav li{
display:inline-block;
margin:0 30px 0 0;
}
 .div_top_nav a{
font-size:20px;
font-weight:bold;
line-height:100px;
}
 .div_top_nav a:link{
display:block;
text-decoration:none;
width:100px;
height:100px;
background-color:#f4f4f5;
color:black;
}
 .div_top_nav a:visited{
display:block;
text-decoration:none;
width:100px;
height:100px;
background-color:#f4f4f5;
color:black;
}
 .div_top_nav a:hover{
background-color:gray;
}
 .div_top_nav a:active{
background-color:gray;
}
.div_left ul{
border:1px solid #cdcdcd;
margin:0;
padding:0;
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
list-style-type:none;
}
 .div_left a{
line-height:250px;
}
 .div_left a:link{
display:block;
width:74px;
height:250px;
text-decoration:none;
color:black;
}
 .div_left a:visited{
color:black;
}
 .div_left a:hover{
background-color:red;
}
上面是CSS样式