div ignoring explicitly set width - html

Question

I've got a container that has a contact form in it.. the form is ignoring my width of 140px and somehow computing itself out to 300px. no idea where it's coming from.
HTML:
<div id="main" role="main">
<div id="mail">
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<span id="response">
<? require_once('php/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</span>
<input type="email" name="email" id="email" placeholder="Enter your email address" />
<input type="submit" id="submit" class="btn" value="Go" />
</fieldset>
</form>
</div>
</div>
CSS:
#main {
width:300px;
height:110px;
padding:10px 20px 10px 20px;
position:absolute;
bottom:50px;
left:50%;
margin-left:-170px;
background-color: #f0f3f8;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f3f8), to(#a9a9ad));
background: -moz-linear-gradient(100% 100% 90deg, #a9a9ad, #f0f3f8);
background: -o-linear-gradient(#f0f3f8, #a9a9ad);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
//text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
//border-bottom: 1px solid rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
////////CONTACT FORM
#mail {
width:140px;
height:95px;
float:right;
display:block;
/*background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;*/
}
#response {
width:140px;
height:25px;
margin-bottom:10px;
display:block;
font-style:italic;
}
input {
width: 124px;
height: 9px;
padding: 8px;
margin: 0 0 10px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 10px;
color: #f2f2f2;
text-shadow: 0px -1px 0px #334f71;
outline:none;
}
input::-webkit-input-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:focus, textarea:focus {
background: #728eaa;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa));
}
input[type=submit] {
width: 40px;
height: 25px;
padding:5px;
margin: 0 auto;
display:block;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79));
cursor: pointer;
}
JSFiddle link

Answer 1

You can't have comments with //. Only multi-line comments work with css. You'll have to remove this comment:
////////CONTACT FORM
The rest of your styles should work after you remove that.