spacing between the border and card elements

This is a Lab I am doing with Udacity(Trading Cards). I am facing an error while submitting the project. the problem showing is The trading card page with styling has spacing between the border and card elements There must be some padding around the outside border: expected 0 to be above 0

    <html>

<head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet">
  <title>Building the Prototype</title>
</head>

<body>
  <div id="container" class="pg">
    <div id="card"class="animal-info">
      <div class="animal-name">
    <h1>FISH OF NEEDLES</h1>
      </div>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img id = "imgId"
   src="https://kids.nationalgeographic.com/content/dam/kidsea/kids-core-objects/animals/pufferfish-closeup-cut.ngsversion.1556636497139.adapt.1900.1.jpg" width="300px" alt="Pufferfish"> 
      <div id="interesting-fact">
      <p id="interesting-fact">Pufferfish can inflate into a ball shape to evade predators. Also known as blowfish, these clumsy swimmers fill their elastic stomachs with huge amounts of water (and sometimes air) and blow themselves up to several times their normal size.</p>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Pufferfish
        </li>
        <li>
          <span>Average Length</span>: Up to 3 feet
        </li>
        <li>
          <span>Diet </span>: Carnivore
        </li>
         <li>
          <span>Tactic </span>: Scientists believe that puffer fish developed this tactic as a method of the self-defense because they are poor swimmers that cannot escape from the danger quickly.
        </li>
        <li>
          <span>Toxic </span>: One puffer fish contains enough toxin to kill 30 adult men.
        </li>
         <li>
          <span>Average Lifespan</span>: 10 years
        </li>
        <li>
          <span class="Habitat">Habitat</span>: puffer fish which live mostly in the warm waters of the Indian, Pacific and Atlantic Oceans
        </li>
      </ul>
      <p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers.
        They reach about 11 centimeters in length, and are named for the multicolored sea anemone in which they make their
        homes.
      </p>
      </div>
    </div>
  </div>
</body>

</html>

css

.animal-info {border: thin solid gray;
  padding:5px; font-style: italic; }
.Habitat {
    font-weight: 700;
}
span {
    font-weight: 700;
}
p { 
   padding: 20px 50px;
}
ul { list-style: none; 
  padding: 20px 50px;
}

img {
  width: 300px;
  padding: 5px;
  }
#interesting-fact {
  margin: 6px;
  text-align:justify;
  font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 13px;
  padding: 0px 15px 0px 15px;
}
.pg {border: 1px solid gray;}
.animal-name{
    padding: 5px;
}
h1 {pading: 5px;}
#imgId{
    width: 300px;
}

#imgId{

 padding: 5px;
}

someone can help me please