Не удается отменить кнопку из textarea

Question

У меня возникли проблемы с формой контакта, которую я создаю. Есть два левых плавающих столбца с «именем» и «электронной почтой» в одном, а затем «сообщение» в другом. Я хочу, чтобы моя кнопка была ниже двух столбцов и была сосредоточена в форме.

Моя проблема в том, что, когда она меньше 50%, кнопка придерживается «сообщения». Несмотря на то, что его родительский элемент является формой, кнопка хочет стилизовать себя со столбцом «сообщение».

Here - ссылка на мою проблему в jsfiddle.

Вот мой 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> 

И мой 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

Ваша кнопка не была частью стилизованной DIV, <div class="column">.

Смотрите обновленный JSFiddle здесь: http://jsfiddle.net/b9rp3Ls4/6/

EDIT: Основываясь на комментарий, я его по центру, используя этот ресурс от W3C, можно найти здесь: http://www.w3.org/Style/Examples/007/center.en.html

Новый JS Fiddle: http://jsfiddle.net/b9rp3Ls4/7/

Лучше использовать одного и того же родителя, если вы пытаетесь сосредоточиться внутри. Используйте поля, чтобы поместить их прямо посередине.