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
Pavle Lucic
10,801 PointsMargin:auto on main logo - explanation?
I dont understand, how margin:auto set on main-logo, push all other list items on the right?
How is that calculated?
3 Answers
Robert Richey
Courses Plus Student 16,352 PointsHi Pavle,
margin-right: auto is pretty much the same as margin-right: 0. Just to be clear, Guil is setting margin-right, not margin.
sergehonderdos
8,918 PointsMargin:auto has a new behavior within a fexbox. Margins set to auto get all the free space left. So that is why all the content is pushed to the right.
sergehonderdos
8,918 PointsWhen you have specified a width on the object that you have applied margin: auto to, the object will sit centrally within it's parent container.
Specifying auto basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size.
Pavle Lucic
10,801 PointsIf you watch this video, https://teamtreehouse.com/library/css-layout-techniques/flexbox-layout/build-a-navigation-with-flexbox you will see that margin:auto, only push list items from logo on far right side...
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsYes, my mistake for margin.
But why is logo pushing all other list item to the right, when defining margin-right:auto?
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsThat's a great question Pavle and now I think I can properly answer it.
Setting
margin-right: autoon the firstlielement is giving it the maximum amount of available margin - the result is that it pushes the otherlielements to the right until they contact the parent containers right side.Here is my Codepen showing the same effect, but applied to the 2nd li child. So, Logo and Home remain left, while all the others get pushed right. The Home
liis given maximum right margin pushing the others to the right.Here is a relevant quote from a CSS-Tricks Margin article.
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsSo, basicaly it will push all elements on right, until last of pushed elements touch the right edge of parent container?
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsYes, that is what's happening.
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsI have modify your pen in chrome inspector, and it seems to margin-right:auto, only push elements if main-nav is set to display:flex;
The pushing elements stops when setting .main-nav to display:block, and list items to display:inline (or inline-block)
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsI tried my best to figure this out - without flex, but I cannot at the moment. Sorry Pavle.
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsWell, we figured out something for sure! :D
Pavle Lucic
10,801 PointsPavle Lucic
10,801 PointsMaybe Guil Hernandez can help us to figure out why margin-right:auto push all other elements to the edge?