Это лаборатория, которую я делаю с Udacity (Торговые карты).Я сталкиваюсь с ошибкой при отправке проекта.Я дал границу всей карте, но результат теста показывает, что я не дал границу.Я помещаю всю карту внутрь div
<div class="animal-whole">
и помещаю этот css, который действительно обводит границу вокруг всей карты.Но я все еще получаю результат теста как неудачный
.animal-whole{
border: 1px solid gray;
}
Я приложил результаты теста со всем HTML кодом CSS
Изображение результата теста .
Это файл HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Building the Prototype</title>
</head>
<body>
<div id="container">
<!-- start -->
<div class="animal-whole">
<div class="animal-name">
<h1>Dog</h1>
</div>
<img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">
<div id="card" class="animal-info">
<p id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
<ul id="facts">
<li id="dogBorder"><span>Scientific Name</span> Dog</li>
<li><span>Average Length</span> 40 centimeters</li>
<li><span>Average Lifespan</span> 15 years</li>
<li><span>Habitat</span>: I dont know</li>
</ul>
</div>
<p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
</div>
<!-- end -->
</div>
</body>
</html>
Это файл CSS
#interesting-fact{
font-style: italic;
}
li{
font-weight: bold;
list-style: none;
}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
.animal-info{
border: 1px solid gray;
padding:5px;
}
.animal-name{
padding: 5px;
}
.animal-whole{
border: 1px solid gray;
}