title: How can I change the margin-left styling (responsive) while being viewed on smaller resolutions
body: <p>The "marginleft:-13%" works best in 1200px+, but when being viewed on a tablet or phone, I need the margin-left changed to -52% and -9% respectively. I am having difficulty doing this. Im running bootstrap 2.3.2 on Windows. </p>
  
  <p>reference URL is <a href="http://solanosprinklers.net" rel="nofollow">solanosprinklers.net</a></p>
  
  <pre><code> &lt;%= form_for @customer, :html =&gt; { :class =&gt; 'form-horizontal',:style =&gt;'margin-left:-13%'} do |f| %&gt;
      &lt;fieldset&gt;
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.text_field :cust_fname, :class =&gt; 'text_field', :placeholder =&gt;"First Name" %&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.text_field :cust_lname, :class =&gt; 'text_field', :placeholder =&gt;"Last Name" %&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.text_field :cust_phone, :class =&gt; 'text_field', :placeholder =&gt;"Phone" %&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.text_field :cust_email, :class =&gt; 'text_field', :placeholder =&gt;"Email" %&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.radio_button :cust_property,'Residential', :class =&gt; 'radio_button' %&gt; Residential
            &lt;%= f.radio_button :cust_property,'Commercial', :class =&gt; 'radio_button' %&gt; Commercial
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
  
          &lt;div class="controls"&gt;
            &lt;%= f.text_area :cust_notes, :class =&gt; 'text_area', :placeholder =&gt;"How can we help ?" %&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=""&gt;
          &lt;%= f.submit "Send", :class =&gt; 'btn btn-primary',:style =&gt; "background:green; margin-left:50%" %&gt;
  
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>here is the bootstrap_and_overrides.css file </p>
  
  <pre><code>@import "twitter/bootstrap/bootstrap";
  
  .hero-unit{
      background-color: green;
      padding: 600px;
      margin-bottom: 300px;
  }
  body {
      padding-top: 41px;
  }
  
  .span12 {
      background-color: white;
      padding:0px;
  }
  
  .btn-primary {
      background-image: none;
      filter: none;
  }
  .form-horizontal{
    /* text-align:right; */
    text-align:left;
  
  }
  @media (max-width: 767px) {
      #new_customer { margin-left:-52% !important; }
  }
  
  @media (max-width: 479px) {
      #new_customer { margin-left:-9% !important; }
  }
  
  
  @import "twitter/bootstrap/responsive";
  
  
  
  
  // Set the correct sprite paths
  @iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
  @iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
  
  // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
  @fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
  @fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
  @fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
  @fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
  @fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
  
  // Font Awesome
  @import "fontawesome/font-awesome";
  
  // Glyphicons
  //@import "twitter/bootstrap/sprites.less";
  
  // Your custom LESS stylesheets goes here
  //
  // Since bootstrap was imported above you have access to its mixins which
  // you may use and inherit here
  //
  // If you'd like to override bootstrap's own variables, you can do so here as well
  // See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
  //
  // Example:
  // @linkColor: #ff0000;
  </code></pre>