How to fix form in right column of 2 column bootstrap 2.32 layout

Question

I have a bootstrap page that looks like above with codeigniter. As you can see the registration form fields are offset to the right. I'm confused as to why this is happening. I would like to shift the form fields to the left to be in line with the rest of the form. The form code begins with:

<div class="row">
<div class="span6">    


<div class="container-fluid"> 

<div class="hero-unit" class="offset4">
<form id="registration-form" class="form-horizontal" action="<?=site_url('Post_controller/getData')?>" method="post">
 <h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
 <!-- Text input-->
<div class="form-control-group">
  <label class="control-label" for="FirstName">First Name</label>
  <div class="controls">
    <input id="FirstName" name="FirstName" type="text" placeholder="Bob" class="input-xlarge" required="">

  </div>
</div>


<!-- Text input-->
<div class="form-control-group">
  <label class="control-label" for="LastName">Last Name</label>
  <div class="controls">
    <input id="LastName" name="LastName" type="text" placeholder="Smith" class="input-xlarge" required="">

  </div>
</div>

Next is the underlying 2 column template:

    <div class="row">
        <div class="span6">
            <h2>Here Are The Details:</h2>

                    <p>  <h3> <?php echo $lorem ?> </h3> 


            </p>
            <p>
                <a class="btn">Learn More</a>
            </p>
        </div>
        <div class="span6">
            <h2>Sign Up Now: </h2>
                            <p>
            <?php echo $form ?>
                            </p>
            <p>
                <a class="btn">Learn More</a>
            </p>
        </div>

    </div>

How can I fix this? I've created http://www.bootply.com/3JITaNo4Vv to help.

Answer 1

The problem is Bootstraps (somehow strange) built in fixed widths and margins :

.form-horizontal .control-label {
   width: 160px;
} 
.form-horizontal .controls {
   margin-left: 180px;
}

overrule that built in CSS with something that suits your form better, like

#registration-form .control-label {
  width: 90px;
}
#registration-form .controls {
  margin-left: 100px;
}

see forked bootply -> http://www.bootply.com/Q3JYi69nqE

I am targeting #registration-form so the overruling does not inflict on other forms, .control-label, .controls and so on elsewhere, just the particular #registration-form.