title: h2 text is blue but should be black
body: <p>My h2 class="post-title" text is blue and should be black. Please can someone help?</p>
  
  <p>Also, .cat-title should be sitting on top of the image and should have a blue background. It seemed to work before I made some changes.</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>/* General ------------------------- */
  
  html {
    height: 100%;
    background-image: url('../img/bgimage.jpg');
    background-size: cover;
    background-attachment: fixed;
  }
  body {
    margin: 0 auto;
    font: 1em/1.5"Helvetica Neue", Helvetica, Arial, sans-serif;
    /*background-color: #d1c5b7;*/
    width: 1225px;
    background-color: white;
  }
  #wrapper {
    /*max-width: 940px;*/
    margin: 0 auto;
    /*padding: 0 5%;*/
  }
  a {
    text-decoration: none;
  }
  /* Heading ------------------------- */
  
  header {
    /*padding-top: 10px;*/
    height: 140px;
    width: 100%;
    background-color: #856941;
  }
  h1 {
    font-size: 5rem;
    color: #fff;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 2px black;
  }
  /* Navigation ------------------------- */
  
  nav {
    background-color: #000;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav li {
    display: inline-block;
  }
  nav a {
    line-height: 43px;
    font-weight: 800;
    padding: 15px 10px;
    color: white;
  }
  /* Articles ----------------------- */
  
  .row {
    width: 1228px;
    height: 1983px;
    padding-top: 25px;
    margin-right: -25px;
    margin-left: -25px;
  }
  .main-content {
    width: 702px;
    height: 2129px;
    float: left;
    padding-left: 25px;
    padding-right: 25px;
  }
  section {
    margin: 20px;
  }
  .row-listing {
    width: 752;
    height: 2090;
    margin-left: -25px;
    margin-right: -25px;
  }
  .column-half {
    width: 326px;
    height: 310px;
    float: left;
    padding-left: 25px;
    padding-right: 25px;
  }
  . .cat-title {
    position: absolute;
    top: 0;
    background: #487be4;
    line-height: 25px;
    margin-left: 7px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 10px;
  }
  img {
    width: 326px;
    height: 172px;
  }
  .meta {
    position: relative;
    margin-top: -12px;
    width: 312px;
    height: 25px;
    padding-left: 14px;
    background: #f2f2f2;
    line-height: 25px;
    font-size: 11px;
    color: #a6a6a6;
    text-transform: uppercase;
  }
  .post-title {
    color: black;
    font-size: 14px;
    line-height: 1.3;
    padding-left: 14px;
    margin: 7px 0;
  }
  /* Sidebar ------------------------ */
  
  .sidebar {
    width: 376px;
    height: 1983px;
    border-left: 1px solid #d9d9d9;
    float: left;
    margin: 20px;
  }
  /* Footer ------------------------- */
  
  footer {
    font-size: 1em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
    background-color: #735d41;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Live Wire | Beta&lt;/title&gt;
    &lt;!-- &lt;link rel="stylesheet" href="css/main.css"&gt; --&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;a href="index.html" id="logo"&gt;
        &lt;h1&gt;Live Wire&lt;/h1&gt;
      &lt;/a&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="tech.html"&gt;Tech&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="entertainment.html"&gt;Entertainment&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="science.html"&gt;Science&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="geek.html"&gt;Geek&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="howto.html"&gt;How To&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="more.html"&gt;More&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="news.html"&gt;News&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;nav&gt;
    &lt;/header&gt;
    &lt;div #wrapper&gt;
      &lt;div class="row"&gt;
        &lt;section class="main-content"&gt;
          &lt;div class="row-listing"&gt;
            &lt;div class="column-half"&gt;
              &lt;article class="Chrome Ram"&gt;
                &lt;span class="cat-title"&gt;Technology&lt;/span&gt; 
                &lt;a href="articles/article001.html"&gt;
                  &lt;img src="img/chrome.jpg" alt="Chrome"&gt;
                &lt;/a&gt;
                &lt;div class="meta"&gt;
                  &lt;time&gt;1 October, 2015&lt;/time&gt;
                &lt;/div&gt;
                &lt;h2 class="post-title"&gt;
           &lt;a href="articles/article001.htm"&gt;How to Stop Chrome from Eating your Ram&lt;/a&gt;
          &lt;/h2&gt;
                &lt;div class="excerpt"&gt;
                &lt;/div&gt;
              &lt;/article&gt;
            &lt;/div&gt;
            &lt;!-- END OF COLUMN HALF --&gt;
            &lt;div class="column-half"&gt;
              &lt;article class="CSS Boxes"&gt;
                &lt;span class="cat-title"&gt;
           Technology
          &lt;/span&gt; 
                &lt;a href="articles/article002.html"&gt;
                  &lt;img src="img/css_box_model.gif" alt="CSS Box Model"&gt;
                &lt;/a&gt;
                &lt;div class="meta"&gt;
                  &lt;time&gt;1 October, 2015&lt;/time&gt;
                &lt;/div&gt;
                &lt;h2 class="post-title"&gt;
           &lt;a href="articles/article002.htm"&gt;CSS Boxes&lt;/a&gt;
          &lt;/h2&gt;
                &lt;div class="excerpt"&gt;
                &lt;/div&gt;
              &lt;/article&gt;
            &lt;/div&gt;
            &lt;!-- END OF COLUMN HALF --&gt;
            &lt;div class="column-half"&gt;
              &lt;article class="CSS Layout"&gt;
                &lt;span class="cat-title"&gt;
           Technology
          &lt;/span&gt; 
                &lt;a href="articles/article003.html"&gt;
                  &lt;img src="img/cssImage.jpg" alt="CSS 3 Image"&gt;
                &lt;/a&gt;
                &lt;div class="meta"&gt;
                &lt;/div&gt;
                &lt;h2 class="post-title"&gt;
           &lt;a href="articles/article003.htm"&gt;CSS Layout&lt;/a&gt;
          &lt;/h2&gt;
                &lt;div class="excerpt"&gt;
                &lt;/div&gt;
              &lt;/article&gt;
            &lt;/div&gt;
            &lt;!-- END OF COLUMN HALF --&gt;
            &lt;div class="column-half"&gt;
              &lt;article class="HTML and CSS Book"&gt;
                &lt;span class="cat-title"&gt;
           Technology
          &lt;/span&gt; 
                &lt;a href="articles/article004.html"&gt;
                  &lt;img src="img/book.jpg" alt="Book Image"&gt;
                &lt;/a&gt;
                &lt;div class="meta"&gt;
                &lt;/div&gt;
                &lt;h2 class="post-title"&gt;
           &lt;a href="articles/article004.htm"&gt;The Best Book for HTML &amp; CSS Beginners&lt;/a&gt;
          &lt;/h2&gt;
                &lt;div class="excerpt"&gt;
                &lt;/div&gt;
              &lt;/article&gt;
            &lt;/div&gt;
            &lt;!-- END OF COLUMN HALF --&gt;
          &lt;/div&gt;
          &lt;!-- END OF ROW LISTING --&gt;
        &lt;/section&gt;
        &lt;aside class="sidebar"&gt;
        &lt;/aside&gt;
      &lt;/div&gt;
      &lt;!-- end of row --&gt;
    &lt;/div&gt;
    &lt;!-- end of wrapper --&gt;
    &lt;footer&gt;
      &lt;p&gt;&amp;copy; 2015 Sean Blythe&lt;/p&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>