freeCodeCamp.org Friday Night Special Step 90 making a cafe menu

img { display: “block”;

margin-left: 100px;

margin-right: 100px; }

Thats my code. I’m really confused on what to actually put for the margin-left & margin-right values. its not clicking

I’m being asked to center the coffee cup image

Hey @jnwokorie .
The approach you took won’t work.
All block level elements are centered a particular way.
I’ll give an example.
Suppose I want to center a div container (which is block level); I should know that all block level elements by default has a width which spans throughout its container horizontally
i.e width = 100% of its container;
So, in order to center my div, I’ll have to give its width a value other than 100%(could be absolute or relative units) to be able to see its changes visually.
Then, I’ll just use

margin:auto;

This is the standard way to center all block level elements.
Bonus:
So, you might ask, why can’t I use 100%(default) of the width instead of a value below it( i.e 65%, 89px e.t.c)
For more clarity, here’s an analogy.
Suppose you went to a store to buy a 100cm ruler. Now, the ruler that was given to you comes in a transparent rectangular box(also 100cm in width) which you could see through.
You would notice that you can’t center the ruler within the transparent box because the ruler takes 100% the width of its container(in this case , box).
So, for you to see a change visually, you can go back to the store and buy maybe a 95cm or 70cm ruler and with this, you can try and center the ruler within the 100cm box; even though the space at the right and left after centering will be greater for 70cm more than 95cm; but the good thing is that you’ll see a change .
I hope this helps.
Happy Coding

img {display: “block”;

margin: auto;

}

This is what I created as my code now. Can you explain a little more how I should visualizing this?

Have you defined a width yet?
if so, try doing that

Try setting the margin-left and right to auto and see if that helps
i.e

margin-left: auto;
margin-right:auto;

Its giving me this response " Hint

You should set the display property to block ."

This was my most recent code:

img {display: “block”;

margin-left: auto;

margin-right: auto;

}

And its still not working
Try img{
Display: block;
Margin: 0 auto;
}

I took out the " "'s and left the margin-left & margin-right in there at auto. it worked now thanks

Happy coding @jnwokorie

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