我几乎完成了我的登录页面，当我缩小时它看起来很好，但每当我尝试放大时，我的页面的主要部分与我的外部div的背景混合在一起。我不知道问题是什么，我从早上起就试图解决这个问题。
这是我的HTML：
<html>
<head>
<title>login</title>
<link rel = "stylesheet" href = "styles and pics/home.css"/>
</head>
<body>
<div id = "outer_div">
<div id = "header_div">
</div>
<div id = "big_wrapper">
<a href = "index.php"><img src = "styles and pics/pictures/login pics/school.jpg" id = "logo"/></a>
<header>
<form>
<table id = "header_table" align = "right">
<tr>
<td id = "logo">
<a href = "index.php" id = "logo_link"></a>
</td>
<td>
<input type = "text" name = "email" id = "email" class = "text" placeholder = "E-mail"/>
</td>
<td>
<input type = "password" name = "password" id = "password" class = "text" placeholder = "Password"/>
</td>
<td>
<input type = "submit" name = "submit_login" id = "submit_login" class = "button" value = "log-in"/>
</td>
</tr>
</table>
</form>
</header>
<div class = "slider">
<img id = "1" src = "styles and pics/pictures/login pics/school.jpg"/>
<img id = "2" src = "styles and pics/pictures/login pics/Jellyfish.jpg"/>
<img id = "3" src = "styles and pics/pictures/login pics/Tulips.jpg"/>
<img id = "4" src = "styles and pics/pictures/login pics/Penguins.jpg"/>
<img id = "5" src = "styles and pics/pictures/login pics/Koala.jpg"/>
</div>
<aside>
<h1 id = "sign_up_text">Create an account</h1>
<form method = "POST" action = "index.php">
<table id = "body_table">
<tr>
<td colspan = "2">
<input type = "text" name = "student_no" id = "student_no" class = "text" placeholder = "Student number"/>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "text" name = "first_name" id = "first_name" class = "text" placeholder = "First Name"/>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "text" name = "last_name" id = "last_name" class = "text" placeholder = "Last Name"/>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "password" name = "stud_server_pass" id = "stud_server_pass" class = "text" placeholder = "Student Server Pass"/>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "password" name = "retype_stud_server_pass" id = "retype_stud_server_pass" class = "text" placeholder = "Student Server Pass"/>
</td>
</tr>
<tr>
<td colspan = "2">
<select name = "campus" id = "branches">
<option selected disabled>Campus</option>
<option value = "campus1">campus1</option>
<option value = "campus2">campus2</option>
<option value = "campus3">campus3</option>
<option value = "campus4">campus4</option>
<option value = "campus5">campus5</option>
</select>
</td>
</tr>
<tr>
<td>
<span id="male"><input type="radio" name="gender" value = "male" class = "gender"/> <span class = "gender_text">Male</span></span>
</td>
<td>
<span id="female"><input type="radio" name="gender" class = "gender" value = "female"/> <span class = "gender_text">Female</span></span>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "submit" id = "submit_signup" name = "submit_signup" class = "button" value = "sign-up" />
</td>
</tr>
</table>
</form>
</aside>
</div>
<div id = "footer_div">
</div>
</div>
<script src = "javascripts/jquery/jquery.js"></script>
<script src = "javascripts/scripts/login.js"></script>
</body>
CSS：
* {
margin:0;
padding:0;
}
section,article,header,footer {
display:block;
}
body {
width:100%;
text-align:center;
background-color:#B8BFCF;
}
#outer_div {
width:100%;
background-color:#FFFF30;
}
#big_wrapper {
position:relative;
max-width:1200px;
min-width:900px;
height:520px;
margin:0 auto;
}
#body_tabletr {
padding:20px 0;
}
#body_table {
position:absolute;
top:50px;
left:780px;
border:1px solid gray;
height:400px;
background:linear-gradient(45deg,white,#DEDCDC);
box-shadow:6px 6px 6px #B8B827;
font:16px bold callibri;
margin:0 auto 50px;
padding:30px 70px;
}
#body_table .text {
width:225px;
height:25px;
outline:none;
font:20px bold callibri;
padding-left:5px;
}
#body_table td {
padding-top:10px;
}
#branches {
width:230px;
height:30px;
font:20px bold callibri;
padding-left:5px;
}
#submit_signup {
width:230px;
height:30px;
border-radius:12px;
outline:none;
border:0;
background-color:#747CE8;
color:#FFF;
font-family:verdana;
font-weight:700;
cursor:pointer;
}
#submit_signup:hover {
background:linear-gradient(tobottom,#747CE8,#51569C);
}
#header_div {
height:80px;
background:linear-gradient(totop,#3333FF,#322747);
border-bottom:1px solid #000;
}
.slider {
width:800px;
height:420px;
overflow:hidden;
position:relative;
left:-170px;
top:30px;
margin:30px auto;
}
.slider img {
width:800px;
height:420px;
display:none;
}
div > img {
position:relative;
top:25px;
left:-100px;
}
#footer_div {
height:50px;
background:linear-gradient(tobottom,#3333FF,#322747);
border-top:1px solid #000;
}
#header_table {
position:absolute;
top:-80px;
left:630px;
}
#header_table .text {
width:200px;
height:20px;
font:16px bold helvetica;
padding-left:5px;
}
#header_table td {
padding-right:10px;
}
#sign_up_text {
position:absolute;
top:-10px;
left:810px;
text-shadow:0 1px 1px #4d4d4d;
color:#4B45FF;
font:40px helvetica;
}
#submit_login {
width:70px;
height:25px;
outline:none;
border:0;
background-color:#589DFC;
color:#FFF;
font-family:verdana;
font-weight:700;
cursor:pointer;
}
#submit_login:hover {
background:linear-gradient(tobottom,#589DFC,#5087D4);
}
.gender_text {
font:18px bold helvetica;
}
#logo {
position:absolute;
height:60px;
width:120px;
top:-100px;
left:35px;
}