Can't unstick button from textarea - html

Question

I have a problem with a contact form I'm making. There are two left floating columns with "name" and "email" in one, then "message" in the other. I want my button to be below the two columns and be centered within the form.
My problem is that, when it's less then 50%, the button sticks to the "message". Even though its parent is the form, the button wants to style itself with the "message" column.
Here is a link to my problem in jsfiddle.
Here's my HTML:
<form id="ajax-contact" method="post" action="mailer.php">
<div class="column">
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<label for="email">email address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="column">
<label for="message">message</label>
<textarea id="message" required></textarea>
</div>
<button id="bottom-button" type="submit">Send</button>
</form>
And my CSS:
form {
padding: 0 5% 0 5%; }
form .column {
width: 100%; }
form label {
display: block;
font-family: "Lato", sans-serif;
font-weight: 400;
color: #553445;
font-size: 1.5em;
line-height: 1em;
padding: 0 5px 5px 2px;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px; }
form input, form textarea {
display: block;
font-family: "Lato", sans-serif;
font-weight: 300;
font-size: 1.5em;
line-height: 1em;
padding: 5px 10px;
color: #553445;
width: 100%;
background: rgba(85, 52, 69, 0.1);
border: none;
border-bottom: 3px solid rgba(85, 52, 69, 0.4);
outline: none; }
form input:active, form input:focus, form textarea:active, form textarea:focus {
border-bottom: 3px solid #fff; }
form input {
margin-bottom: 40px; }
form textarea {
min-height: 200px;
resize: none; }
button {
background: #e85657;
color: #fff;
padding: 0.5em;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 1.5em;
padding-left: 1.05em;
padding-right: 1.05em;
cursor: pointer;
margin-bottom: 3em;
border-radius: 3px;
border: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
button:hover {
background: #fff;
color: #e85657; }
button:focus {
outline: none; }
button a {
color: inherit; }
#bottom-button {
width: 100%;
border-radius: 0 0 3px 3px; }
#media screen and (min-width: 30em) {
#ajax-contact .column {
float: left;
width: 50%; }
#ajax-contact textarea {
min-height: 146px; }
#ajax-contact #bottom-button {
border-radius: 3px;
width: auto; } }

Answer 1

Your button wasn't part of the styled div, <div class="column">.
See updated JSFiddle here: http://jsfiddle.net/b9rp3Ls4/6/
EDIT: Based on the comment, I've centered it using this resource from the W3C, available here: http://www.w3.org/Style/Examples/007/center.en.html
The new JS Fiddle: http://jsfiddle.net/b9rp3Ls4/7/
It's better to use the same parent if you're trying to center within. Use the margins to put it right in the middle.