title: CSS Background not working on Codepen
body: <p>I've been trying to put my code up on Codepen but for some reason, the #left div background just doesn't display. It however, works fine locally. I've tried using image urls, background colors and everything to fix it, but nothing has worked so far. Any help would be appreciated!</p>
  
  <p>Only the #left div is supposed to have a background color.
  Following is the code and <a href="https://codepen.io/scribbyx/pen/yPWbbq" rel="nofollow noreferrer">here's the codepen.</a></p>
  
  <p>index.html</p>
  
  <pre><code>&lt;link rel="stylesheet" href="style.css"/&gt;
  &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
  &lt;body&gt;
    &lt;div id="left"&gt;
    &lt;form id="formBox"&gt;
      &lt;textarea id="input" placeholder="Enter your LispyHTML"&gt;&lt;/textarea&gt;
      &lt;input id="renderButton" type="button" onclick="render()" value="Render!"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
      &lt;div id="right"&gt;
    &lt;div id="target"&gt;
    &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>style.css:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Open+Sans');
  
  html, body {
    margin: 0;
    padding: 0;
    border: 0px;
  }
  
  body{
      font-family: 'Open Sans';
  }
  
  #left{
      width: 50%;
      height: 100%;
      float: left;
    background: #000000 !important;
      /*background: linear-gradient(to right, #c2e59c, #64b3f4);       */
  }
  
  #right{
      width: 50%;
      height: 100%;
      float: right;
  }
  
  #formBox{
      position: absolute;
      width:40vw;
      height:240px;
      background-color: #fff;
      margin:auto;
      border-radius: 5px;
      padding:10px;
      left:20%;
      top:50%;
      margin-left:-17%;
      margin-top:-200px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  #target{
      height: 100%;
      float: left;
  }
  
  #input{
      height: 100%;
      width: 100%;
      left: 500px;
      margin: auto;
      border-style: none; 
      border-color: Transparent; 
      overflow: auto; 
      resize: none;
      outline: none;
      display:inline-block
  
  }
  
  #renderButton {
      position: absolute;
      top: 280px;
      left: 37%;
      background-color:#9C27B0;
      border-radius:10px;
      border:1px solid #9C27B0;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      font-size:17px;
      padding:10px 20px;
      text-decoration:none;
      text-shadow:0px 1px 0px #2f6627;
      outline: none;
  }
  #renderButton:hover {
      background-color:#7B1FA2;
      border: none;
  }
  </code></pre>