Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

The Property margin's Value "auto"

I still don't get what actually happened. I calculated the space left in the container after subtracting the items' widths and the container's padding, it turned out to be more than the margin-right (which is set to auto) of item-1 so does that mean that it doesn't actually take all space left? if so then what does it actually do ? or is there sth wrong in my calculations.. Thx in advance. Here is a snapshot of my workspace : https://w.trhou.se/otah7v70p1 .

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Sorry if i annoyed you with all of my non-sense. Thanks a lot!

1 Answer

Antti Lylander
Antti Lylander
9,686 Points

Hi, did you take item2's left margin (5px) into account? All of your items have margins.

If you are using chrome, use ctrl+shift+i to inspect the elements. Everything seems normal to me.

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

i did inspect the elements. Also, what doesitem2's left margin have to do with that?

Antti Lylander
Antti Lylander
9,686 Points

There is something wrong with your calculations. The item1's right margin takes up all the space left. Maybe your window size changed after your calculations or something.

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Sorry that i didn't clarify. Everything works fine don't worry. The thing is what does margin-right: auto; do exactly i looked it up but can't find an answer that i get so if u can please explain it.

Antti Lylander
Antti Lylander
9,686 Points

Margin auto does just what you expected. It fills all the available space inside the container.