title: background color for div
body: <p>Ideally, <code>&lt;div id="main"&gt;</code> should be 560px wide with a height of 100% and background color #333333.
  However, this is not so. Briefly, like right after refreshing the page, I can see that the background color is there but once the page finishes loading it disappears. This makes me think there is a conflict somewhere in my CSS, I'm just not sure where. How do I get <code>&lt;div id="main"&gt;</code> to have the background? Here's what I'm working with:</p>
  
  <pre><code>HTML
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Parlour&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;header&gt;
      &lt;nav&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;GET IN TOUCH&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;div id="logo"&gt;
      &lt;a href="#"&gt;&lt;img src="img/parlour_side.png" alt="Parlour Salon logo" /&gt;&lt;/a&gt;
      &lt;/div&gt;&lt;!-- end logo --&gt;
  
      &lt;div id="main"&gt;
      &lt;div class="brief"&gt;
          &lt;h2&gt;&lt;a href="#"&gt;&lt;span&gt;ABOUT PARLOUR&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
          &lt;p&gt;Parlour is blah blah blah.&lt;/p&gt;    
          &lt;/div&gt;&lt;!-- end brief --&gt;
      &lt;div class="brief"&gt;
          &lt;h2&gt;&lt;a href="#"&gt;&lt;span&gt;SERVICES&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
          &lt;p&gt;Parlour offers blah blah blah.&lt;/p&gt;
      &lt;/div&gt;&lt;!-- end brief --&gt;
      &lt;div class="brief"&gt;
          &lt;h2&gt;&lt;a href="#"&gt;&lt;span&gt;PRODUCTS&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
          &lt;p&gt;At Parlour, we believe blah blah blah.&lt;/p&gt;
      &lt;/div&gt;&lt;!-- end brief --&gt;
      &lt;div class="brief"&gt;
          &lt;h2&gt;&lt;a href="#"&gt;&lt;span&gt;GET IN TOUCH&lt;/span&gt;&lt;/a&gt;&lt;/h2&gt;
          &lt;p&gt;1522 U Street NW&lt;br/&gt;Washington DC&lt;br/&gt;202-986-0080&lt;/p&gt;
          &lt;div class="social"&gt;
              &lt;a href="#"&gt;&lt;img src="img/facebook.png" alt="Parlour Facebook" /&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;img src="img/twitter.png" alt="Parlour Twitter" /&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;img src="img/youtube.png" alt="Parlour YouTube" /&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;img src="img/yelp.png" alt="Parlour Yelp" /&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!-- end social --&gt;
      &lt;/div&gt;&lt;!-- end brief --&gt;
  
  
      &lt;/div&gt;&lt;!-- end main --&gt;
  &lt;/div&gt;&lt;!-- end container --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Reset */
  
  html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, address, code, img,
  small, strong, dl, dt, dd, ol, ul, li
  fieldset, form, label {
      background: url(img/background.jpg) no-repeat center center fixed; 
      background-size: cover;
      border: 0;
      font-size: 100%;
      margin: 0;
      outline: 0;
      padding: 0;
      vertical-align: baseline;
  }
  
  body {
      background: url('img/background.jpg');
      font-family: nevis-webfont;
      color: #ffffff;
  }
  
  ol, ul {
      list-style-type: none;
  }
  
  /* Type */
  
  @font-face {
      font-family: nevis-webfont;
      src: url('type/nevis-webfont.eot');
      src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'),
           url('type/nevis-webfont.woff') format('woff'),
           url('type/nevis-webfont.ttf') format('truetype'),
           url('type/nevis-webfont.svg#') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  h1 {
      font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
      font-size: 125%;
      font-weight: normal;
      letter-spacing: 1px;
      line-height: 1.5;
      text-transform: uppercase;
  }
  
  h2 {
      font-family: Didot, "Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;
      font-size: 125%;
      font-weight: normal;
      line-height: 1.5;
  }
  
  h3 {
      font-family: nevis-webfont;
      font-size: 75%;
      font-weight: normal;
      letter-spacing: 1px;
      line-height: 1.5;
      text-transform: uppercase;
  }
  
  p {
      font-family: nevis-webfont;
      font-size: 75%;
      line-height: 1.5;
  }
  
  a {
      text-decoration: none;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  /* Basic */
  
  #container {
      width: 100%;
  }
  
  #logo {
      float: left;
      margin-left: 100px;
      margin-top: 200px;
  }
  
  /* Header */
  
  nav {
      background: #333333;
      height: 35px;
      width: 100%;
  }
  
  nav ul {
      background: #333333;
      margin-left: 220px;
      padding-bottom: 5px;
      padding-top: 5px;
  }
  
  nav ul li {
      background: #333333;
      display: inline;
  }
  
  nav ul li a {
      background: #333333;
      color: #ffffff;
      font-family: nevis-webfont;
      font-size: 75%;
      letter-spacing: 1px;
      text-decoration: none;
      margin: 0 16px;
  }
  
  /* Main */
  
  #main {
      background-color: #333333;
      height: 100%;
      width: 560px;
      margin-left: 230px;
      margin-top: 200px;
      overflow: hidden;
  }
  
  #main .brief h2 span {
      color: #ffffff;
      text-decoration: none;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dA2EY/" rel="nofollow noreferrer">JSFiddle</a> though that isn't quite what I'm seeing, so here's a screen cap of the local site..
  <img src="https://i.stack.imgur.com/8XYtJ.jpg" alt="image"></p>