title: The background-color is spanning the width of my nav-bar, not the entire background
body: <p>I'm new to programming and was hoping someone could help me with this one. </p>
  
  <p>I have multiple pages and would like them all to be different colors. I wrapped all of my code in a class and then styled them like this:</p>
  
  <pre><code>.tech_page{   
      background-color: #F4C0CC;
  }
  </code></pre>
  
  <p>And the body looks like this:</p>
  
  <pre><code> &lt;body&gt;
  
      &lt;div class="tech_page"&gt;
  
         &lt;div class="nav-bar"&gt; 
             &lt;nav&gt; &lt;a href="/"&gt;&lt;p class="nav-home"&gt; Home &lt;/a&gt; &lt;/nav&gt;
             &lt;nav&gt; &lt;a href='/tech'&gt;&lt;p class="nav-tech"&gt; Tech &lt;/p&gt;&lt;/a&gt; &lt;/nav&gt; 
             &lt;nav&gt; &lt;a href='/about'&gt;&lt;p class="nav-about"&gt; About &lt;/p&gt;&lt;/a&gt; &lt;/nav&gt;
             &lt;nav&gt; &lt;a href='/mindmap'&gt;&lt;p class="nav-mindmap"&gt; Mind Map &lt;/p&gt;&lt;/a&gt; &lt;/nav&gt; 
             &lt;nav&gt; &lt;a href='/projects'&gt;&lt;p class="nav-projects"&gt; Projects &lt;/p&gt;&lt;/a&gt; &lt;/nav&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>But only the nav bar is getting the background color! Everything else remains white. The entire span of the page gets the background color if I put a class on the body but I don't think that's clean code. Does anyone have any ideas?</p>