5. Use classes to add class... what am I doing wrong?


I keep getting the error code: "Opps, try again. Did you remember to give you .friend class a border of 2px dashed #008000?"

I can't figure out what I'm doing wrong to save my life!


<!DOCTYPE html>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend"><p>Rodger</p></div>
		<div class="friend"><p>Roy</p></div>
		<div class="family"><p>Ron</p></div>
		<div class="enemy"><p>Ray</p></div>
		<div class="enemy" id="archnemesis"><p>Rida</p></div>


div {
display: inline-block;
margin-left: 5px;
margin-top: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px;
text-align: center;
position: relative;

best_friend {

border: 4px solid #008000;

.friend {
border: 2px dashed #008000;
.family {
border: 2px dashed #0000FF;
.enemy {
border: 2px dashed #FF0000;

archnemesis {

border: 4px solid #FF0000;



Your best_friend and archnemesis overwrite your friend and enemy, causing problems in the checking script


How do I correct the problem? I don't understand how "best_friend" and "archnemesis" are overwriting "friend" and "enemy"


Well, some of your divs to both have a class and id, the id styling will be applied, so some of your friend and enemy div's have the wrong border. You could turn the #best_friend and #archnemesis into a comment


I just removed the class from those div lines and left the IDs and everything worked. Thanks!


That will also work.