Sign Up form style

Question

My sign up form doesn't look like in a book. It's so big. I can't fix it because i don't know CSS very good. http://hkar.ru/BOAk How can i fix this problem? File new.htm.erb

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
  <div class="span6 offset3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages' %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <%= f.label :email %>
      <%= f.text_field :email %>
      <%= f.label :password %>
      <%= f.password_field :password %>
      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>
      <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>

File custom.css.scss

@import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
$grayLight: #999;
$grayLighter: #eee;
$grayDarker: #222;
@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.
.
.
.
.
.
.
/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}
input {
  height: auto !important;
}
#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}
.field_with_errors {
  @extend .control-group;
  @extend .error;
}

Thanks for trying to help me)

Answer 1

Not knowing how exactly you expect the form to look like I can only provide you an approximate solution:

form {
  width: 50%;
  margin: 0 auto;
}

This way you'll set the width of a form to only half of available space (it'll be "smaller") and center it horizontaly.