Bootstrap Collapse Menu Troubles -- Doesn't push content OR display proper inverse background color
<p>I am new both to SO and Boostrap, but I made sure to try a number of previous solutions to my problem and it seems I've created a unique problem for myself as none of the solutions SEEMED to have worked for me. Hopefully I'm not just missing something silly but here's my Bootstrap code:</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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;nav class="navbar navbar-inverse"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;header class="navbar-header"&gt;
      &lt;a class="navbar-brand" href="#"&gt;JMG Photography&lt;/a&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&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;/header&gt;

    &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
        &lt;!--Home--&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;
&lt;div class="guess"&gt;
  &lt;p&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  &lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

<p></p>