title: Test case failing regarding a mistake
body: <p>This is a Lab I am doing with Udacity(Trading Cards). I am facing an error while submitting the project. </p>
  
  <p>the instruction : 2. give the interesting facts <code>&lt;div&gt;</code> a CSS class of <code>animal-info</code></p>
  
  <p>this is my HTML code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
    border: 7.5px solid black;
     padding: 20px;
  }
  #card{
    border: 5px solid black;
    width: 95%;
    height: 95%;
    padding: 10px;
    margin: 5px;
  }
  
  #interesting-fact{
    font-style: italic;
  }
  
  .animal-info{
    border: 5px solid black;
    padding: 5px;
    width: 90%;
  }
  
  .animal_info{
    font-style: italic;
    border: 5px solid black;
    padding: 5px;
  }
  
  ul {
    font-weight: bold;
    list-style: none;
  }
  
  h1{
    border: 5px solid black;
    padding: 5px;
  }
  
  img{
    border: 5px solid black;
    padding: 10px;
  }
  
  #summary{
    border: 5px solid black;
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Building the Prototype&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;h1&gt;Kitten&lt;/h1&gt;
      &lt;!-- photo credit: wikipedia.org, image taken by Ritik --&gt;
      &lt;img src="https://placekitten.com/g/200/300" alt="Kitten"&gt;
      &lt;div id="card"&gt;
        &lt;div class="animal-info"&gt; 
        &lt;p id="interesting-fact"&gt; 
           All kittens are born with blue eyes and will have their fully developed eye color at around 8 weeks old.
        &lt;/p&gt;&lt;/div&gt;
        &lt;ul id="facts"&gt;
          &lt;li&gt;
            &lt;span&gt;Scientific Name&lt;/span&gt;: Caracal
          &lt;/li&gt;
          &lt;li&gt;
            &lt;span&gt;Average Length&lt;/span&gt;: 14 to 16 inches
          &lt;/li&gt;
          &lt;li&gt;
            &lt;span&gt;Average Lifespan&lt;/span&gt;: 15.1 years
          &lt;/li&gt;
          &lt;li&gt;
            &lt;span&gt;Habitat&lt;/span&gt;: Houses.
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;p id="summary"&gt;Cats were probably first kept because they ate mice, and this is still their main 'job' in farms throughout the world. Later they were kept because they are friendly and good companions. Their average lifespam is 15.1 years.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  this is my CSS code</code></pre>
  </div>
  </div>
  </p>
  
  <p>the error is : The trading card page with styling has an info section below the image with class 'animal-info'
  The #card element does not have class 'animal-info': expected false to equal true</p>