3/8 Style those divs!


I cannot figure out what I'm doing wrong in 3/8. I have tried refreshing, and tried 3 different browsers. This is the error message I keep getting:

Oops, try again. Make sure your divs are 100 pixels high! 
(If your height looks correct, make sure your border-radius is 100%, not 100px!)

My CSS looks like this:

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;

And HTML like this:

<!DOCTYPE html>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
        <!--Add your HTML below!-->

If anyone knows what I'm doing wrong here, please let me know.


Hello Davilex,

I've copied your code and gave it a try, it worked fine for me!
But by changing the zoom of my browser I got the same error as you did. Have you tried to reset your browser's zoom level to 100%? Use CTRL + 0 on windows and CMD + 0 on a mac.

I hope this works for you!


Thanks for your reply dutchc0de. I´ve tried that, but it didn´t help at that moment. But when I submit the code again, it suddenly works (without resetting the zoom). I'm not sure what was going on, but the problem is solved. Thanks.


thanks - my zoom was 100% changed to 150% and passed


hi @davilex so you fixed this problem !

because it's idem for me
how did you solved it finally you know it or it's still mysterious?

yes @dutchc0de I also used CTRL + 0 on windows and CMD + 0 on a mac, i'll try with xubuntu and i'll come back to tell you

it looks like ... by the way... on html, I verify the < head > if the link between the doctype html and css stylesheet is wrong ...but no it's ok on this side.

and the result is not correct Because I would obtain each div in solid black circle but there isn't any style
have look please:

HTML: (spaces are to show you)
< !DOCTYPE html >
< html >
< head >
< link type="text/css" rel="stylesheet" href="stylesheet.css"/ >
< title >Mes amis< /title >
< /head >
< body >
< !--Ajoutez votre code HTML ci-dessous !-- >
< div >1er div< /div >
< div >2nd div< /div >
< div >3ème div< /div >
< /body >
< /html >

/ Ajoutez votre CSS ci-dessous ! /
div {
border:2px solid black;
thanks :smile:


Hello Detchen,

There are two semicolons ( ; ) missing in your CSS code:

/ Ajoutez votre CSS ci-dessous ! /
div {
margin-left:5px                       <-- here 
border-radius:100%                    <-- here
border:2px solid black;

Also the comment above the CSS isn't right, / Ajoutez votre CSS ci-dessous ! /, should be /* Ajoutez votre CSS ci-dessous ! */. But I think that isn't the problem here


ho yes thanks @dutchc0de

so I corrected:
but as I could align with text-align:center I didn't find the code to text-align vertically inside the circles:
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
I try to add empty < p > < /p > into the html but it doesn't works more than one return.

thanks for the aswer I couldn't see...


if you add paragraphs around your text in the circles:

<div class="friend"><p>friend</p></div>

you can simple push down the paragraph:

p {
  margin-top: 40px;

text-align: center will only horizontal align the text, you should read this guide, it does an excellent job at explaining how to align both horizontal (easy) and vertical (bit more difficult)


Thanks @stetim94
I put margin-up but lol it is margin-top ok
I told you my English is terrible : terribly frenchy lol

but, ... margin-top:40px; ...makes all the circle down at 40px from the top but it doesn't align vertically the text in the middle of the circle, it is that I try to do... perhaps we will se it in the next lessons

because I tried:
... text-align:bottom; ... : no result !
... text-align:middle; ... : no result !


text-align bottom and middle are not valid values, possible values for text-align;

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Can i see all your html and css code? it would be really nice if you could put it in a bin (go here), and paste your html code in the html tab, the css code in the css tab, and then post the url of your bin to the forum