请有人帮我提高网站的响应能力，当视口缩小时，网站会一团糟，我不知道我在代码中做了什么。
提前感谢！
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
margin-left: 10vw;
width: 79.4vw;
height: 80vw;
max-width: 1000vw;
position: absolute;
overflow: hidden;
margin-top: 0px;
font-size: 1.6vw;
padding: 5px 5px;
}
.webheadimg {
margin-left: 10vw;
width: 80vw;
max-width: 1000vw;
max-height: 150vh;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow: hidden;
}
#menu {
width: 80vw;
font-size: 1vw;
max-font-size: 1.6vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-color: #FFFFFF;
font-size: 1vw;
max-font-size: 1.6vw;
text-align: center;
margin-left: 10vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 1000vw;
}
#menu ul {
height: auto;
padding: 0.8vw 0px;
margin: 0px;
}
#menu li {
display: inline;
font-size: 1vw;
max-font-size: 16vw;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.8vw 0.8vw 0.8vw 0.8vw;
font-size: 1.5vw;
max-font-size: 16px;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 10vw;
float: left;
height: auto;
width: 5%;
padding: 5px 5px;
}
@media (max-width: 1285px) {
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.8vw;
height: 100vw;
overflow: hidden;
font-size: 3vw;
margin-left: 23.4vw;
padding: 5px 5px;
bottom: 48.9vw;
position: relative;
}
.webheadimg {
width: 96vw;
height: auto;
max-width: auto;
max-height: auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-left: 1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display: block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 1vw;
float: left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</div>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a>
</li>
<li><a href="Sport.html">Sport</a>
</li>
<li><a href="Hulltoday.html">Hull Today</a>
</li>
<li><a href="Property.html">Property</a>
</li>
<li><a href="Social.html">Social Media</a>
</li>
<li><a href="Music.html">Music</a>
</li>
<li><a href="Reviews.html">Reviews</a>
</li>
<li><a href="Movies.html">Movies</a>
</li>
<li><a href="Weather.html">Weather</a>
</li>
</ul>
</div>
<div class="body1">
Text Box
</div>
</body>正如你所看到的，"文本框"在屏幕上跳跃，页面底部有一个随机的灰色框，如果有人能为我找到这个的修复方法，我将不胜感激
示例
您需要添加
<head>
...
<meta name="viewport" content="width=device-width"/>
...
</head>
<head>标记中缺少视口。你可以使用这个例子：
<meta name="viewport" content="width=device-width"/>