title: Trying to fit a fixed width container into a full-width (100%) parent?
body: <p>so I'm new to coding and am attempting to create a website with some full-width (100%) containers that include fix-width containers inside...I've tried playing with figures and divs alike, but neither was working.</p>
  
  <p>This is an image of the site mockup: <a href="https://i.stack.imgur.com/HYOAb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HYOAb.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the code I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;header&gt;
  
      &lt;div class="header"&gt;
  
      .logo
      .searchbar
      .phone numbers insert
  
      &lt;/div&gt; &lt;!--closes header div--&gt;
  
  &lt;/header&gt;
  &lt;div class="navband"&gt;
  &lt;nav&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Engineered Integrated Solutions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Employment&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;/div&gt; &lt;!--closes navband div--&gt;
  &lt;div class="content"&gt;
  
      &lt;h2&gt;Header&lt;/h2&gt;
      &lt;p&gt;Content Here&lt;/p&gt;
  
  &lt;/div&gt; &lt;!--closes content div--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      width: 950px;
      margin: 0 auto;
  }
  
  header {
      width: 100%;
      height: 175px;
      background-color: #ff8400;
  }
  
  #nav {
  margin-top: 280px;
  width: 100%;
  }
  
  .nav {
      list-style: none;
      margin: 0;
      text-align: left;
      background-color: #08172d;
      padding: 5px 0;
  }
  .nav li{
      display:inline;
  }
  .nav a{
      display:inline-block;
      padding:10px;
      color: #fff;
      font-family: arial;
      font-weight: bold;
      text-decoration: none;
  }
  .nav a:hover{
      display:inline-block;
      padding:10px;
      color: #ff8400;
      font-family: arial;
      font-weight: bold;
  }
  </code></pre>
  
  <p>The above code displays the fixed width layout (while the entire body behind it remains white), but I don't know how to include individual full-width parent divs for the header, nav bar, and content area without ignoring the wrapper (fix-width) completely, which is what was happening when I used a figure method...any ideas?</p>