Custom CSS won't override default bootstrap css
<p>I'm pretty new in HTML and CSS and I'm stuck here...</p>

<p>Website is: <a href="http://www.i1cevic.com/" rel="nofollow">http://www.i1cevic.com/</a></p>

<p>Basically, the 'bold text' won't be the <code>font-size</code> I defined in my CSS: </p>

<pre><code>h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.05;
letter-spacing: -2.7px;
font-size: 89px;
}




h1 small {

font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: -2.7px;
font-size: 70px;

}
</code></pre>

<p>The class I'm having problem with is <code>h1</code>, as you can see <code>font-size</code> is defined as <code>89px</code> but it keeps showing Bootstrap's default <code>h1</code> size : <code>35-36px</code> or something, I went past this issue by writing <code>!important</code> after <code>font-size: 89px</code> but that's not the solution... </p>

<p>Here's the HTML code. (not including head section)</p>

<pre><code>&lt;body id="page-top"&gt;
&lt;header&gt;
    &lt;div class="header-content"&gt;
        &lt;h1&gt;&lt;small&gt;&lt;font color="black"&gt;Light Text&lt;/font&gt;&lt;/small&gt;&lt;/h1&gt;
        &lt;h1&gt;&lt;font color="black"&gt;Bold Text&lt;/font&gt;&lt;/h1&gt;
        &lt;br&gt;
        &lt;a class="btn btn-primary btn-xl page-scroll" href="#about"&gt;Find
        Out More&lt;/a&gt;
    &lt;/div&gt;
&lt;/header&gt;
&lt;!-- jQuery --&gt;
&lt;script src="js/jquery.js"&gt;
&lt;/script&gt;
&lt;!-- Bootstrap Core JavaScript --&gt;

&lt;script src="js/bootstrap.min.js"&gt;
&lt;/script&gt;
&lt;!-- Plugin JavaScript --&gt;

&lt;script src="js/jquery.easing.min.js"&gt;
&lt;/script&gt;
&lt;script src="js/jquery.fittext.js"&gt;
&lt;/script&gt;
&lt;script src="js/wow.min.js"&gt;
&lt;/script&gt;
&lt;!-- Custom Theme JavaScript --&gt;

&lt;script src="js/creative.js"&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>