Html 当最小化浏览器时，我的部分布局被切断

正如您在第一幅图像中看到的，当浏览器最小化时，边框被切断。第二幅图是它在所有屏幕尺寸上的外观。我的一些页面出现了这个问题，我花了很多时间试图解决这个问题，但是运气不好。感谢您的帮助！如果您需要更多的代码片段，请告诉我。我附加了JSFIDLE，但它确实很混乱，可能很难看出问题所在。如果调整浏览器的大小，全屏版本会更容易一些

我是一名身体喜剧演员，不断受到滑稽角色和夸张动作的启发。我融合了舞蹈和戏剧的元素，创造出了一些有点过分的、离谱的表演。我使用锁定技术作为基础构建，并产生适合于折衷观众的精彩表演。我的目标是让观众感到振奋，沉浸在自己的笑声中，暂时忘记任何担忧或悲伤
我的工作

&抄袭；2015年Bethan Rainforth
html，
身体{
背景图片：url（images/background.png）；
宽度：989px；
保证金：0自动；
最小高度：100%；
}
#主要{
最大宽度：940px；
}
#标题{
边缘顶部：60像素；
}
#彩虹img{
宽度：120%；
边缘底部：12px；
}
导航a{
字体系列：hobostd；
填充：50px；
}
保险商实验室{
列表样式类型：无；
}
导航{
文本对齐：居中；
左边距：20px；
}
#导航条{
左边距：-40px；
}
a{
文字装饰：无；
}
李海军{
显示：内联；
宽度：150px；
}
灰色
a:悬停，
答:访问,，
a:主动的{
颜色：#A5；
文字装饰：无；
}
页脚{
颜色：#fff；
文本对齐：居中；
溢出：隐藏；
利润率最高：37%；
}
#工作{
颜色：#A5；
字体系列：hobostd；
字体大小：1.3em；
文本对齐：居中；
}
#标志img{
宽度：320px；
利润上限：-60px；
}
img.pic{
宽度：260px；
浮动：左；
左边距：70像素；
边缘顶部：68px；
}
#包装纸{
背景图片：url（images/border.png）；
背景重复：无重复；
背景大小：100%100%；
宽度：730px；
高度：490px；
显示：块；
右边距：自动；
左边距：自动；
利润上限：-70px；
}
#家{
背景图片：url（images/pinkpaint.png）；
背景重复：无重复；
背景大小：100%100%；
宽度：30px；
保证金：0自动；
颜色：#000；
}
第1分部{
浮动：对；
边框：15px实心#373636；
盒子阴影：0px 0px 0px 8px rgba（55,54,54,3）；
背景色：#373636；
身高：100%；
文本对齐：居中；
}
第2分部{
边框：15px实心#373636；
盒子阴影：0px 0px 0px 8px rgba（55,54,54,3）；
宽度：49.6%；
边缘：0-2米；
背景色：#373636；
身高：100%；
文本对齐：居中；
}
.视频{
边缘顶部：65px；
}
iframe{
边缘顶部：5px；
}
关于文本{
字体系列：hobostd；
颜色：#7ca5d2；
字体大小：1.2米；
线高：35px；
利润率：75px；
填充顶部：68px；
}
第2组{
左缘：80.5%；
利润底部：-20%；
位置：相对位置；
顶部：-130像素；
}
第2组img{
宽度：200px；
}
第一组{
利润底部：-30%；
位置：相对位置；
顶部：-230像素；
}
div.leftrule{
边框顶部：2个实心#A5A5；
宽度：80px；
左边距：360px；
边缘底部：-11px；
}
第五条规则{
边框顶部：2个实心#A5A5；
宽度：80px；
左边距：546px；
利润上限：-26px；
}
舞蹈演员组{
宽度：30%；
左边缘：35%；
利润上限：200px；
位置：绝对位置；
排名：0；
左：0；
}
丹切利夫特公寓{
宽度：20%；
利润率最高：19%；
位置：绝对位置；
排名：0；
左：0；
}
舞蹈演员组{
宽度：20%；
左缘：85%；
位置：绝对位置；
排名：0；
左：0；
利润率最高：14%；
}
#页脚{
位置：相对位置；
利润上限：-100px；
}
#网站{
文本对齐：右对齐；
}

---

放置一些媒体要求，如

@media (max-width:1030px){div#video1{float:none;}}

---

将媒体要求放在css文件中。像@media（最大宽度：1030px）{float:none}hmmm似乎不起作用。它把我的视频搞乱了。我继续添加代码。抱歉花了这么长时间。我现在很确定这与div#video1下的宽度有关。我把它注释掉了，它似乎解决了我的内容被删掉的问题，但是我的边框变小了，我希望它保持目前的大小。

    <div id="footer">
    <div class="container">
        <div class="dancerfoot">
            <img src="images/dancerfoot.png" alt="dancer jumping over footer">
        </div>
        <div class="danceleft">
            <img src="images/danceleft.png" alt="dancer to the left kicking">
        </div>
        <div class="danceright" >
            <img src="images/danceright.png" alt="dancer to the right shaking it">
        </div>
        <footer>&copy; 2015 Bethan Rainforth


        </footer>
        </div>

        </div>

        </body>



  html,
  body {
background-image: url(images/background.png);
width: 989px;
margin: 0 auto;
min-height: 100%;
 }
#main {
max-width: 940px;
 }
#header {
margin-top: 60px;
}


#rainbow img {
width: 120%;
margin-bottom: 12px;
}
 nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
 }

#nav-bar {
margin-left: -40px;
}
 a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
   .gray,
  a:hover,
 a:visited,
 a:active {
color: #a5a5a5;
text-decoration: none;
 }
footer {
color: #fff;
text-align: center;
overflow: hidden;
margin-top: 37%;
}
#work {
color: #a5a5a5;
font-family: Hobo Std;
font-size: 1.3em;
text-align: center;
}

#logo img {
width: 320px;
margin-top: -60px;
}

img.pic {
width: 260px;
float: left;
margin-left: 70px;
margin-top: 68px;
}
#wrapper {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 730px;
height: 490px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: -70px;
 }
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
div#video1 {
float: right;
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
background-color: #373636;
height: 100%;
text-align: center;

}
div#video2 {
border: 15px solid #373636;
box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
width: 49.6%;
margin: 0 -2em;
background-color: #373636;
height: 100%;
text-align: center;
}
.videos {
margin-top: 65px;

}
 iframe {
 margin-top: 5px;
}
p#about-text {
font-family: Hobo Std;
color: #7ca5d2;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
padding-top: 68px;
}

div.dancer2 {
margin-left: 80.5%;
margin-bottom: -20%;
position: relative;
top: -130px;
}
div.dancer2 img {
width: 200px;
}

div.dancer1 {
margin-bottom: -30%;
position: relative;
top: -230px;
}
div.leftrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 360px;
margin-bottom: -11px;
}
div.rightrule {
border-top: 2px solid #a5a5a5;
width: 80px;
margin-left: 546px;
margin-top: -26px;
}
div.dancerfoot img {
width: 30%;
margin-left: 35%;
margin-top: 200px;
position: absolute;
top: 0;
left: 0;
}
div.danceleft img {
width: 20%;
margin-top: 19%;
position: absolute;
top: 0;
left: 0;
}
div.danceright img {
width: 20%;
margin-left: 85%;
position: absolute;
top: 0;
left: 0;
margin-top: 14%;
 }
#footer {
position: relative;
margin-top: -100px;
}
#website {
text-align: right;
}

@media (max-width:1030px){div#video1{float:none;}}