Container taking up unnecessary space?

[Coplestone]

I have a small issue here which I can't quite figure out. I have three containers on one page all below each other. One for buttons, a JS image slideshow and a description box. The image slider seems to take up unnecessary space when the browser is resized activating media queries:

http://gyazo.com/33376dcadc99cba69d5668e240fae788

CSS desktop view (without media queries):

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 with media queries, this is where the container is causing a problem:

@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{
}
}

Any help is greatly appreciated.

[cssfreakie]

I'm glad you provided the link, all the code posted above is not relevant.

on line 29730 of your stylesheet you declare the following:

.download-tooltip {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
color: inherit;
cursor: inherit;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding: 12px 16px;
text-align: center;
text-decoration: inherit;
width: 500px; /* this is not dynamic 90% width can be nice */
}

Note the comment made.

 

I noticed when inspecting your site that most styles are overwriten; not once but around 20 times. This is an indication your stylesheet is redundant. Your stylesheet has more than 30K lines. Im not sure if this project is aiming to be a high traffic website but if so, try to lower the css to around 3k lines.