容器占用不必要的空间？

Question

我在这里有一个小问题，我无法理解。我在一个页面上有三个容器，彼此相同。一个用于按钮，一个JS图像幻灯片和一个描述框。调整浏览器大小以激活媒体查询时，图像滑块似乎占用了不必要的空间：

http://gyazo.com/33376dcadc99cba69d5668e240fae788

CSS桌面视图（没有媒体查询）：

body { 
  background: #141414 url('../images/background1.png');
  background-repeat: repeat-y;
  background-attachment:fixed;
  background-position:center;
}
#container{
 height:450px;                                                           
 width:840px;
 margin:120px auto 2% auto;
 position:relative;
}
#container2{
 height:60px;
 width:840px;
 margin:0 auto 50px auto;
 position:relative;
 -moz-box-shadow:0 0 5px 5px black;
 -webkit-box-shadow:0 0 5px 5px black;
 box-shadow:0 0 5px 5px black;
 }
 #container2 p{
 color:white;
 font-size:15px;
 padding-left:5px;
 }
 #container2 h2{
 color:white;
 font-size: 18px;
 text-decoration:none;
 padding-left:5px;
 padding-top:2px;
 }
 #img{
  height:450px;
  width:840px;
  position:absolute; 
  -moz-box-shadow: 0 0 5px 5px black;
  -webkit-box-shadow: 0 0 5px 5px black;
  box-shadow: 0 0 5px 5px black;
}
#l_holder{
  height:450px;
  width:100px;
  position:absolute;
  left:0px;
  top:0px;  
  cursor:pointer;
}
#r_holder{
  height:450px;
  width:100px;
  position:absolute;
  right:0px;
  top:0px;  
 cursor:pointer;
}
.left{
  height:50px;
  width:50px; 
  position:absolute; 
  top:45%;
  left:0px;
}
.right{
  height:50px;
  width:50px; 
  position:absolute; 
  top:45%;
  right:0px;
}
 .clear{
  clear:bottom;
} 

带有媒体查询的CSS，这是容器导致问题的地方：

@media all and (min-width: 3.5in) and (max-width: 10in) {

        body { 
          background: #141414;
        }
        #container{
            height:30%;
            width:100%;
            margin:5% auto;
            padding:0 0 0px 0;
        }

        #container2{
            width:100%;
            margin: 0; padding: 0;
        }
        #container2 p{
            padding-left:3px;
        }
        #container2 h2{
            padding:5px 0 0 3px;
        }
        #container2 .body_black_box{ 
        }
        #img{
            height:80%;                                                          
            width:100%;
        }
        #l_holder{
            height:80%;
        }
        #r_holder{
            height:80%;
        }
        .left{
        }
        .right{
        }
        .clear{
        }
        }

如果有人有任何想法，我会感激不尽。