Как центрировать форму в середине контейнера начальной загрузки?

Question

Я попытался предоставить свою форму с одним полем ввода электронной почты и кнопкой, которая является изображением. Моя кнопка и вход выравниваются бок о бок. Я хочу сосредоточить свою форму в середине класса контейнеров bootstrap, но ничего, что я пробовал, не сработало. Я дал свою форму ширине и краю: 0 auto, но это совсем не помогло.

HTML:

<div class="container"> 
     <div class="text-box-two"> 
      <span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span> 
     </div> 
      <form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/> 
         </div> 
         <div class="form-group button"> 
          <input type="image" src="images/tree.png" name="submitEmail" class="button"/> 
         </div> 
       </div> 
      </form> 
    </div> 
</div>  

CSS:

.well.email-form{ 
background-color: #FFFFFF !important; 
border: none !important; 
border-radius: 1px !important; 
} 
#emailForm{ 
width:1115px; 
margin:0 auto; 
} 
.form-group{ 
float:left; 
} 
#emailForm{ 
margin:0 auto; 
} 
.form-control{ 
height:102px; 
border-radius:1px; 
font-size:30px; 
} 

Answer 1

Используйте рамки Bootstrap, чтобы сделать это. Посмотрите на offsetting columns в документах.

Попробуйте это в контейнере выше.

<div class="container col-sm-8 col-sm-offset-2"> 

Вот Fiddle с ним работать.