Why does Bootstrap override my CSS definition for a non Bootstrap id?
<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;MyApp&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" type="text/css" href="app.css"&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;section class="sect-break" id="home-top-container"&gt;
        &lt;div class="cell-display"&gt;
          &lt;div class="title divInside"&gt;&lt;h1&gt;WELCOME!&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="divInside" id="tagline"&gt;&lt;h2&gt;&lt;i&gt;tagline&lt;/i&gt;&lt;/h2&gt;&lt;/div&gt;

          &lt;div class="divInside"&gt;&lt;h1&gt;WHAT?&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="divInside"&gt;&lt;h2&gt;&lt;p&gt;Part 1
         &lt;p&gt;Part 2
&lt;p&gt;Part 3&lt;/p&gt;&lt;/h2&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
      &lt;section id="problem"&gt;
        &lt;div class="title"&gt;&lt;h1&gt;WHY?&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="container problem-top-level"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center"&gt;
              &lt;div class="problem-container"&gt;
                &lt;div class="flex j-c-center a-i-center"&gt;&lt;div class="problem-circle flex j-c-center a-i-center"&gt;&lt;i class="fa fa-4x fa-group"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;h3&gt;Problem!&lt;/h3&gt;
                &lt;p&gt;Reason&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="problem-container"&gt;
                &lt;div class="flex j-c-center a-i-center"&gt;&lt;div class="problem-circle flex j-c-center a-i-center"&gt;&lt;i class="fa fa-4x fa-ticket"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;h3&gt;Problem!&lt;/h3&gt;
                &lt;p&gt;Reason&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/section&gt;

      &lt;section id="solution-header" class="sect-break flex a-i-center"&gt;
        &lt;div class="m-l-lg title"&gt;&lt;h1&gt;Solution&lt;/h1&gt;&lt;/div&gt;    
      &lt;/section&gt;

      &lt;section id="solution"&gt;
        &lt;div class="container problem-top-level"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center"&gt;
              &lt;div class="problem-container"&gt;
                &lt;div class="flex j-c-center a-i-center"&gt;&lt;div class="solution-circle flex j-c-center a-i-center"&gt;&lt;i class="fa fa-4x fa-glass"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;h3&gt;Solution&lt;/h3&gt;
                &lt;p&gt;Reason&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="problem-container"&gt;
                &lt;div class="flex j-c-center a-i-center"&gt;&lt;div class="solution-circle flex j-c-center a-i-center"&gt;&lt;i class="fa fa-4x fa-home"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;h3&gt;Solution&lt;/h3&gt;
                &lt;p&gt;Reason&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="problem-container"&gt;
                &lt;div class="flex j-c-center a-i-center"&gt;&lt;div class="solution-circle flex j-c-center a-i-center"&gt;&lt;i class="fa fa-4x fa-percent"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;h3&gt;Solution&lt;/h3&gt;
                &lt;p&gt;Reason&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="contact" class="sect-break"&gt;
        &lt;h1&gt;Interested? &lt;a href="email.address"&gt;Contact us&lt;/a&gt;&lt;/h1&gt;
      &lt;/section&gt;

      &lt;script type="text/javascript" src="bundle.js" charset="utf-8"&gt;&lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>This is my head in my HTML and when I inspect the page with Chrome's inspection tools, I see <code>&lt;style&gt;</code> tags that hold most of my CSS, but the <code>id</code> I have modified to <code>height: 100vh</code> and in the <code>&lt;style&gt;</code> tags, it's <code>height: 300px</code>. I cannot for the life of me figure out where this is coming from and what is overriding me. Any ideas?</p>

<p>This is how I define <code>#problem</code> in app.css:</p>

<pre><code>#problem {
  background-color: #0eaca7;
  height: 100vh;
}
</code></pre>

<p>And I do not have any inline <code>&lt;style&gt;</code> tags at all. When the page is loaded client-side, <code>&lt;style&gt;</code> tags appear in the head, perhaps generated by loading the CSS stylesheets? I'm new to web dev so I'm not actually sure where they come from.</p>

<p>This is what Chrome shows in inspection:
<img src="https://i.stack.imgur.com/xRQrM.png" alt="chrome inspection tool showing difference between id&#39;s."></p>