Centering input and textarea not matching - html

Question

Trying to center two inputs side by side, and a textarea just below it
form ul {
list-style: none;
text-align: center;
}
form ul li {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#nameform,
#emailform,
#messageform {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-color: #cfcfcf;
font-size: 15px;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none
}
#nameform,
#emailform {
margin-left: auto;
margin-right: auto;
height: 35;
}
#messageform {
display: block;
margin-right: auto;
margin-left: auto;
}
<div id="contactform">
<form>
<ul>
<li>
<input type="text" name="name" placeholder="name" id="nameform" size="35"></input>
<li>
<li>
<input type="text" name="email" placeholder="email" id="emailform" size="35">
</innput>
<li>
</ul>
<textarea type="text" name="message" placeholder="Message" id="messageform" rows="4" cols="80"></textarea>
</form>
</div>
And for some reason it is displayed on google and IE as this:
How can i make it so the textarea is completely centered underneath the two inputs?

Answer 1

You had some syntax errors, and I made small changes https://jsfiddle.net/DIRTY_SMITH/fedz7nx7/2/
form ul{
list-style: none;
text-align:center;
}
form ul li {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#nameform, #emailform, #messageform {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-color: #cfcfcf;
font-size: 15px;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none
}
#nameform, #emailform {
margin-left: auto;
margin-right: auto;
height: 35;
}
#messageform {
display: block;
margin-right: auto;
margin-left: auto;
}

Answer 2

Many syntax errors, many unnecessary settings (and some that may be necessary for your styling purposes, but are not necessary to solve the problem).
The following is how I would approach this issue.
form ul {
list-style: none; /* Remove bullets */
margin: 0; /* Remove list spacing */
font-size: 0; /* Remove white-space between inline-block tags */
padding: 5px; /* A little bit of spacing */
}
form ul li {
display: inline-block; /* Allow the list items to be on the same line */
width: 50%; /* list items should be half-width */
box-sizing: border-box; /* Declared sizes should include padding */
padding: 5px; /* A little bit of spacing */
}
form ul li:nth-child(3) {
width: 100%; /* The third list item should be full-width */
}
form ul li input,
#messageform {
width: 100%; /* the inputs and textarea should be full-width */
box-sizing: border-box; /* Declared sizes should include padding */
}
/* Environment */ body { margin: 0; }
<div id="contactform">
<form>
<ul>
<li>
<input type="text" name="name" placeholder="name" id="nameform">
</li>
<li>
<input type="text" name="email" placeholder="email" id="emailform">
</li>
<li>
<textarea type="text" name="message" placeholder="Message" id="messageform" rows="4"></textarea>
</li>
</ul>
</form>
</div>