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


This is the standard way to center all block level elements.
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

margin-left: 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.