Sorting your friends and margins

<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/en/courses/web-beginner-en-jNuXw/0/1?curriculum_id=50579fb998b470000202dc8b

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

When I’m trying to add links/pictures to the different divisions, they all seem to have their own margins. Can someone help me understand what is happening with the margins and how I can get them to be in line?

``` My Social Network
Google

Harry Potter

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

div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}

div a {
position: relative;
margin-top: 40px;
font-size: 12px;
}

.friend {
border: 2px dashed #008000;
}

.family {
border: 2px dashed #0000ff;
}

.enemy {
border: 2px dashed #ff0000;
}

#best_friend {
border: 4px solid #00c957;
background-image: url(“http://www.chicagonow.com/everyday-me/files/2015/09/childhoodfriends.jpg”);
background-size: 95px 100px
}

#archnemesis {
border: 4px solid #cc0000;

<do not remove the three backticks above>

each div will have a margin left and top as set above ^

What do you want inline ?

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