title: Bootstrap conflicts with my own css file
body: <p>My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.</p>
  
  <p>I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is` </p>
  
  <pre><code>&lt;title&gt;For Testing Purposes&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="main.css"&gt;
  </code></pre>
  
  <p>Here is the HTML code of attributes I want to change`</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Space&lt;/h1&gt;
  &lt;section class="parallax"&gt;
    &lt;div class="parallax-inner"&gt;
      &lt;h2&gt;Space&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;h1&gt;Space&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my main.css, which takes effect only when the bootstrap line is deleted.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parallax {
    background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
    background-size: 100% 100%;
  }
  .parallax-inner {
    padding-top: 10%;
    padding-bottom: 10%;
    text-align: center;
    font-size: 575%;
  }
  .h1 {
    font-size: 575%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried !importnant tags too.</p>