CSS- can't resize text input - html

Question

It was probably asked before / someone had a similar problem, but I have been searching for a long time and couldn't find any solution to my problem.
I have a div called loginBox that is centred, and has a form in it. I want the text boxes in the form to take almost the entire width of the form (It should look like google's new sign in form).
I am setting the input's margin to auto and the width to 90% using css, but for some reason it has no effect. Even when I set the width to a number (i.e 200px), the width remains unchanged.
The only way I could make it work is increase the padding of the input to 100px, but this is both not responsive, and not a good practice.
This is the code I am using:
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height=1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width=90%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
Screenshot of what I get right now

Answer 1

Fix your width. Instead of = it should be :. Your code seems fine otherwise. And width: 100% works just the way you intended.
Also, as mentioned in the comments, It should be height: 1500px; in .pageMain
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height: 1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width:100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>

Answer 2

the first look into your css file
height=1500px; // Why =, not :? <----- PageMain class
width=90%; // <---- same here in input class

Answer 3

change:
width=90%;
height=1500px;
to:
width:90%;
height:1500px;
also use * { box-sizing: border-box;} for remove scrollbars.