title: override bootstrap css without !important tag
body: <p>I've searched around a bit and can't find a clean solution.</p>
  
  <p>Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue. </p>
  
  <p>If i tack the <code>!important</code> tag on to a <code>font-size</code>, that works. I just feel like going through and putting <code>!important</code> after everything is sloppy and time consuming. Thoughts?</p>
  
  <p>I am running a rails app, if that is germane to my issue.</p>
  
  <p>Script</p>
  
  <pre><code>&lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.scss"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>h1 {
    font-weight: 600;
    color: #fff;
    font-size: 5.5em !important;
  }
  </code></pre>