title: why cant i see any output in the two divs?
body: <p>I cant see any output in my left and right divs.I can only see the header and footer but not the rest.I am a beginner so please try to answer in simple terms.
  Kindly try to point out the error/bug instead of altering the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
    height: 50px;
    width: 1600px;
    border: 2px solid red;
    border-radius: 5px;
    background-color: Aquamarine;
    position: fixed;
    z-index: 1;
  }
  .left {
    height: 500px;
    width: 700px;
    border: 2px solid green;
    border-radius: 5px;
    background-color: Lavenderblush;
    float: left;
  }
  .right {
    height: 500px;
    width: 700px;
    border: 2px solid blue;
    border-radius: 5px;
    background-color: lightblue;
    float: right;
  }
  #footer {
    height: 50px;
    width: 1600px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: Yellow;
    clear: both;
  }
  h1 {
    text-align: center;
    margin: auto;
    color: Blue;
    font-family: Verdana;
  }
  h4 {
    text-align: center;
    margin: auto;
    color: Blue;
    font-family: Verdana;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;h1&gt;My Resume&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="left"&gt;
    &lt;p&gt;Hello how are u&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
    &lt;p&gt;some random data here&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
    &lt;h4&gt;This is the footer&lt;/h4&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>