Html and css, Sorting your friends. Says pass but result not satisfactory


<!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">Friend 1</div>
		<div class="friend">Friend 2</div>
		<div class="family">The Fam </div>
		<div class="enemy">"Friend 3"</div>
		<div class="enemy">"Friend 4"</div>
		<div class="enemy" id="archnemesis">"Friend 5"</div>


/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	border:2px solid black
.friend {
    border:2px dashed #008000;
.family {
    border:2px dashed #0000ff;
.enemy {
    border:2px dashed #ff0000;
#best_friend {
    border:4px solid #00c957;
#archnemesis {
    border:4px solid #cc0000;

I think I’m messing up the border radius.

Thank you for your time.

How do I paste my index.html code?

what is the wrong with the border-radius? They are circles, as they are suppose to be

as for posting html code:

Friend names are not properly aligned within the circle like they should be. Instead they are half outside the circle and half inside. That’s all that’s wrong.

well, horizontal align is easy:

div { text-align: center; }

as for vertical align, you can look at exercise of sorting your friends, they use paragraphs which they give a margin-top.

or you can read this centering guide, which is simply fantastic

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.