title: Center Bootstrap form-control to center of browser
body: <p>Im trying to center the form control to the center of my website, but for some reason the CSS doesnt apply to the form-control, but it applies to everything else in the div...</p>
  
  <p>This my HTML:</p>
  
  <pre><code>&lt;div id="search"&gt;
      &lt;h2 style="color:deepskyblue"&gt;Enter battle-tag&lt;/h2&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              @using (Html.BeginForm())
              {
                  @Html.TextBox("profileId", null, new { @class = "form-control" }); &lt;br /&gt;
                      &lt;p style="color:red"&gt;Replace the "#" in your battle-tag with an "-"&lt;/p&gt;
                      &lt;p style="color:red"&gt; Search is Case-Sensitive &lt;/p&gt;
                      &lt;button class="btn btn-primary" type="submit"&gt; Find Player &lt;/button&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my CSS:</p>
  
  <pre><code>body {
      height: 100%;
      width: 100%;
  }
  
  
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
  }
  
  
  .dl-horizontal dt {
      white-space: normal;
  }
  
  
  input,
  select,
  textarea {
      max-width: 280px;
  }
  
  #search{
      text-align:center;
      margin-top:10%;
      margin-left:10%;
  }
  </code></pre>
  
  <p>Obviously the Bootstrap.css is default, I havent touched it at all.</p>