Words not in circles


#1

So I have gotten this far and the display screen is bugging me. So the names of my friends are not completely in the circles, they are like halfway inside and half way outside. I just want to know how to fix it. It has been his way since I started this project.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
	<div class="friend" id="best_friend"> Kylie </div> 
	<div class="family"> Luis </div>
	<div class="enemy" id="archnemesis"> Me </div>
		
	</body>
</html>



div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
	
}
.friend{
    border: 2px dashed;
    color: #008000
}
.family{
    border: 2px dashed;
    color: #0000ff;
}
.enemy{
    border: 2px dashed;
    color: #ff0000;
}

#best_friend{
    border: 4px solid #00c957
}
#archnemesis 
{
    border: 4px solid #cc0000;
}


#2

for horizontal align, it is easy. Just add text-align: center; to your div css selector. For the vertical align look at exercise 1, they wrap the names in paragraph tags, and give the paragraph tags a margin-top.

Or read this centering guide, and choice a method you prefer