I have site, which has a black margin around it of 15 pixels as shown here
The problem is that when I expand the browser window width-wise, this gap gets much wider, as shown below
I have been trying for a while now to make this width remain at 15 pixels but I just can’t figure out what the issue is. I’ve used all the tools that FireBug provides but to no avail. Does anyone have any suggestions on what I might try?
By process of elimination I’ve been able to narrow down the bug in this CSS
/*----------------------------------------------------------------------*/
/* Login
/*----------------------------------------------------------------------*/
body#login{
position:static;
left:auto;
right:auto;
width:350px;
margin:120px auto;
padding:2%;
}
body#login #content{
min-height:50px;
padding:8px;
}
body#login form label{
padding:0;
margin:0;
width:100%;
}
body#login form section{
width:100%;
}
body#login form section div{
width:90%;
float:none;
padding:0 4% 6px 4%;
border:0;
}
body#login form section > div{
width:90% !important;
}
body#login form section div input{
width:100% !important;
}
body#login form section div input#remember{
width:auto !important;
}
body#login form section div.checker{
width:auto !important;
padding:0;
margin:0;
}
body#login form section label{
padding:3% 2% 1%;
width:90% !important;
float:none;
}
body#login form section label.checkbox div{
width:10px;
padding:0;
margin:0;
}
body#login form section a{
float:right;
}
/*----------------------------------------------------------------------*/
/* Wizard
/*----------------------------------------------------------------------*/
body#wizard{
position:static;
left:auto;
right:auto;
width:500px;
margin:120px auto;
padding:0;
}
body#wizard #content{
min-height:50px;
padding:8px;
}
/*----------------------------------------------------------------------*/
/* Media Queries
/*----------------------------------------------------------------------*/
/* For very large screens increes the margins*/
@media screen and (min-width:1281px) {
body{
margin-left:10%;
margin-right:10%;
}
}
/* Move the Headernav to a drop down menu to the right */
@media screen and (max-width:960px) {
#header ul#headernav li ul, #header ul#headernav li ul.collapsed{
display:none;
}
#header ul#headernav li ul.shown{
display:block !important;
}
#header ul#headernav{
border-left:1px solid;
position:relative;
float:right;
height:60px;
width:60px;
cursor:pointer;
background-repeat:no-repeat;
background-position:center center;
}
#header ul#headernav li ul{
position:absolute;
right:0;
width:170px;
padding:0;
margin:0;
top:60px;
}
#header ul#headernav li ul li{
float:none;
margin:0;
border-bottom:0;
border-top:0;
}
#header ul#headernav li ul li a{
padding:10px;
}
#header ul#headernav li ul li:last-child{
border-bottom:1px solid;
}
#header ul#headernav li ul span{
right:5px;
top:10px;
}
#header ul#headernav li ul li ul{
position:relative;
top:0;
padding:0;
display:none;
padding-bottom:6%;
z-index:20;
width:99%;
}
#header ul#headernav li ul li ul.shown{
display:block;
}
#header ul#headernav li ul li ul li{
margin:0 6%;
}
#header ul#headernav li ul li ul li a{
font-size:12px;
padding:5px;
}
.g1,.g2,.g3,.g4,.g5,.g6 {
padding:0;
width:48.0%;
}
.g7,.g8,.g9,.g10,.g11,.g12 {
padding:0;
width:98%;
}
}
@media screen and (max-width:900px) and (min-width:701px) {
form fieldset > section > div{
width:69%;
}
form fieldset > section label{
width:24%;
}
}
/* For more smaller Screens (iPad) */
@media screen and (max-width:700px) {
header #search,header #searchbox{
max-width:100px;
}
form label{
padding:10px 1%;
}
form fieldset > section{
padding-bottom:8px;
}
form fieldset > section > label{
left:0;
right:0;
width:98%;
margin:0;
float:none;
padding:1%;
padding-bottom:8px;
}
form fieldset > section > div{
float:none;
width:98%;
padding:4px;
border:0;
}
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
width:98%;
}
}
@media screen and (max-width:800px) and (min-width:481px) {
nav{
width:150px;
}
nav ul li a span{
font-size:12px;
}
nav ul li ul{
margin-left:10px;
margin-right:10px;
}
nav ul li ul li a span{
padding-right:4px;
}
#content{
padding:15px 0 15px 160px;
}
#header ul li ul li,#header ul li ul li a, #header ul#headernav li ul li ul{
-webkit-border-radius:0; -moz-border-radius:0; border-radius:0;
}
#header ul li ul li:last-child,#header ul li ul li:last-child a{
-webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomleft:4px; border-bottom-left-radius:4px;
}
}
/* iPhone and real small devicces */
@media screen and (max-width:480px) {
body#login{
position:static;
left:auto;
right:auto;
width:96%;
margin:10px auto;
padding:0;
}
body#login #content{
padding:0;
padding-top:20px;
width:99%;
}
body#login form{
border:0;
}
body#login form section label{
border:0;
}
body#login fieldset{
margin:0px;
}
body#login form > section a{
margin:10px 4%;
float:left;
}
#pageoptions > div{
left:2px;
right:2px;
padding:15px;
}
header #searchbox{
display:none;
max-width:40px;
}
header #searchbox input{
max-width:40px;
}
body{
width:96%;
margin:1%;
}
body, header, nav, #content{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#header{
}
#logo{
width:100%;
}
#logo, header, #content{
width:100%;
}
nav, nav ul, nav ul li, nav ul li a, nav ul li a span, nav ul li a:active span, nav ul li a.active span{
margin:0;
padding:0;
}
nav ul li a:active span, nav ul li a.active span{
border-top:1px solid;
background-position:center center;
}
nav{
border-top:1px solid;
position:static;
width:98%;
margin:0 1%;
}
nav ul li{
width:44px;
display:inline-block;
margin-left:-2px;
margin-right:-2px;
}
nav ul li a span{
border-left:1px solid;
border-bottom:0;
height:40px;
text-indent:-9999px;
background-position:center center;
}
nav ul li:first-child a span{
border-left:0;
}
nav ul li ul{
position:absolute;
left:0;
margin:0;
z-index:15;
background:none;
width:98%;
margin:0 1%;
}
nav ul li ul li{
display:block;
width:100%;
}
nav ul li ul li a span{
height:20px;
text-indent:0;
}
#content{
padding:0;
}
form{
padding:0;
margin:0;
}
form input, form textarea{
font-size:14px;
max-width:96%;
}
#wl_msg{
right:5px;
left:5px;
width:auto;
}
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {
width:100%;
margin:0;
}
}
Can anyone spot the problem?
Thanks.
Sachin
try to set max-width propriety, and overflow hidden to your black background.
I hope this can be helpful.
FerchoJ