title: CSS not getting applied to the form elements in .erb
body: <p>I am trying to apply css to a form in .erb and it doesnt seem to be working.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.submit-form{
      margin-left:auto;
      margin-right:auto;
      max-width: 500px;
      background: #F7F7F7;
      padding: 25px 15px 25px 10px;
      font: 12px Georgia, "Times New Roman", Times, serif;
      color: #888;
      text-shadow: 1px 1px 1px #FFF;
      border:1px solid #E4E4E4;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>h1&gt;Submit page &lt;/h1&gt;
      &lt;div class="submit-form"&gt;
      &lt;%= simple_form_for Post.new do |f| %&gt; 
         &lt;%= f.input :title  %&gt;
          &lt;%= f.input :blurb %&gt; 
         &lt;%= f.input :funding_goal %&gt;
         &lt;%= f.input :funding_duration %&gt;   
        &lt;%= f.button :submit %&gt;  
      &lt;% end %&gt; 
      &lt;/div&gt; 
  </code></pre>
  
  <p>this is the code from the application.css file</p>
  
  <pre><code>.hidden
  {
    display: none;
  }
  .pull-left {
      float: left;
  }
  .pull-right {
      float: right;
  }
  .simple_form label {  
    float: left;  
    width: 100px;  
    text-align: right;  
    margin: 2px 10px;  
  }  
  
  .simple_form div.input {  
    margin-bottom: 10px;  
  }  
  
  .simple_form div.boolean, .simple_form input[type='submit'] {  
    margin-left: 120px;  
  }  
  
  .simple_form div.boolean label {  
    float: none;  
    margin: 0;  
  }  
  </code></pre>
  
  <p>I am wondering if i need to add the my sbmit.css.scss to appplication.css file</p>
  
  <p>main.css</p>
  
  <pre><code>@import "variables";
  @import "primitives";
  @import "header";
  @import "footer";
  
  @import "homepage";
  @import "share";
  @import "checkout";
  </code></pre>