title: Header content disappearing when CSS applied for responsive layout (bootstrap file included in html)
body: <p>I am setting a responsive layout for my personal website, which has worked in a simple example. However I am not getting the same results. It may have something to do with including the Bootstrap files in my html. Below is the html and css code for the responsive layout:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;header&gt;
          &lt;a href="/" id="logo"&gt;
              &lt;h1&gt;Brian Weber&lt;/h1&gt;
              &lt;h2&gt;Engineer | Python Programmer&lt;/h2&gt;
          &lt;/a&gt;
  
          &lt;!-- Navigation bar --&gt;
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
           &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
              &lt;/button&gt;
  &lt;!--            &lt;a class="navbar-brand" href="#"&gt;Brian Weber&lt;/a&gt;
              &lt;p&gt;Engineer&lt;/p&gt; --&gt;
              &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="resume"&gt;Resume&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (min-width: 660px) {
  
  /*********************************
  HEADER
  *********************************/
  
    .navbar .navbar-default {
       float: right; 
      background: none;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }
  
    #logo {
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;
    }
  
    #logo h1 {
      font-size: 2.5em;
    }
  
    #logo h2 {
      font-size: 1.7em;
      margin-bottom: 20px;
    }
  
    header {
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;
    }
  
  }
  </code></pre>
  
  <p>When I check the code in a browser, the h1 and h2 text do not appear. However when I inspect the element there are placeholders for where the text should be. The text color is already set to black in the main.css. My question is how would I fix this problem so that the layout looks like the picture below? I am thinking maybe there is an issue with the bootstrap files where they are overriding the CSS code. </p>
  
  <p><a href="http://i.stack.imgur.com/WzrNJ.png" rel="nofollow">Correct format for header and navbar</a></p>
  
  <p><a href="http://i.stack.imgur.com/3oPth.png" rel="nofollow">h1 and h2 text disappearing</a></p>