More positioning changes questions

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

https://www.codecademy.com/courses/web-beginner-en-jNuXw/0/8?curriculum_id=50579fb998b470000202dc8b

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
The circles change position depending on whether the p tag is empty, has one line, or has two lines. Why? How to correct?

``` My Social Network

John

Mark Smith Jones

<do not remove the three backticks above>

Here is the CSS:

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
}
div p {
    margin-top:40px;
    position:relative;
    text-align: center;
}
.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;
}

This bit of code gets applied when you have a paragraph tag in use

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