How can I adjust the size of the text area in the Comment section to match the full width of the section, starting from the beginning instead of the middle? You can find the code here.
HTML
<body bgcolor="#00BCD4">
<div>
<h1>Contact me</h1>
<form action="MAILTO:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2449416449410a474b49">[email protected]</a>" method="post" enctype="text/plain">
<label for="name"><font face="Roboto"><font color="red">*</font>Name</font>
</label>
<input type="text" name="name" required>
<br>
<label for="email"><font face="Roboto"><font color="red">*</font>E-mail</font>
</label>
<input type="text" name="mail" required>
<br>
<label for="comment"><font face="Roboto"><font color="red">*</font>Comment</font>
</label>
<input type="text" name="comment" style="height:220px;">
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
<h2>or you can contact me in game @</h2>
</div>
</body>
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto);
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
input[type=submit] {
width: 30%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: 'Roboto Condensed', sans-serif;
font-size: 110%;
}
input[type=reset] {
width: 25%;
background-color: #f44336;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: 'Roboto Condensed', sans-serif;
font-size: 110%;
}
input[type=submit]:hover {
background-color: #45a049;
}
input[type=reset]:hover {
background-color: #d32f2f;
}
div {
border-radius: 5px;
padding: 40px;
margin: 0;
}
form {
width: 300px;
margin: 0 auto;
}
label {
font-family: 'Roboto Condensed', sans-serif;
font-size: 110%;
font-weight: bold;
}
h1 {
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
}
h2 {
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
}