title: CSS styling not taking effect
body: <p>Here's the HTML: </p>
  
  <pre><code>&lt;div id="contact-details"&gt;
      &lt;p id="contact-details-first"&gt;
          &lt;h3&gt;Address:&lt;/h3&gt;
          &lt;ul&gt;
              &lt;li&gt;238 Parsley&lt;/li&gt;
              &lt;li&gt;Annlin, Pretoria&lt;/li&gt;
              &lt;li&gt;South Africa&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the CSS: </p>
  
  <pre><code>#contact-details {
      width: 80%;
      background-color: #ddd;
      margin: auto;
  }
  
  #contact-details-first &gt; h3 {
      display: inline-block;
      float: left;
      border: 1px solid yellow;
  }
  
  #contact-details-first &gt; ul {
      position: relative;
      left: 100px;
      border: 2px solid blue;
  }
  </code></pre>
  
  <p>For some reason the bottom two css style don't take effect.</p>
  
  <pre><code>#contact-details-first &gt; h3
  #contact-details-first &gt; ul
  </code></pre>