title: Some sections in the CSS can't be recognised
body: <p>Why is it that sometimes some sections in the CSS aren't recognised and sometimes they are? My codes are as follows:</p>
  
  <pre><code>&lt;section class="generalContainer"&gt;&lt;time&gt;8 September 2016&lt;/time&gt;&lt;/section&gt;
  &lt;section class="oath-takingContainer"&gt;&lt;time&gt;12 October 2016&lt;/time&gt;&lt;/section&gt;
  
  section.generalContainer {
      position: absolute;
      width: 100%;
      text-align: center;
      margin: -15px 0 10px -15px;
      padding: 5px 0 5px 0;
      background: #868A08;
      }
  
  section.oath-takingContainer {
  position: absolute;
  width: 100%;
  text-align: center;
  margin: -15px 0 10px -15px;
  padding: 5px 0 5px 0;
  background: #08088A;
  }
  </code></pre>
  
  <p>The website just recognises section.generalContainer but not oath-takingContainer. I used the Chrome Inspect function and please see the right box for the CSS. The difference between generalContainer and oath-takingContainer. The former is recognised but the latter not recognised.</p>
  
  <p><a href="https://i.stack.imgur.com/aLHX4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aLHX4.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/4BXQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4BXQr.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/CverR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CverR.png" alt="enter image description here"></a></p>