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

Anne Donald
Anne Donald
9,847 Points
Posted by Anne Donald
Anne Donald
9,847 Points

Flexbox item with margin auto

Hi Everybody!

I was hoping that somebody could help me on a query that I have in regards to a Flexbox item please.

I would like one on the li's (I added the class of .logo to) to be offset to the left.. Please see the CSS below

ul{
    background: #888;
    display: flex;
    justify-content: flex-end;
}

ul li{
    list-style: none;
    margin: 5px;
    padding: 10px;
    border: 2px solid black;
}

.logo{
    margin: auto;
    padding: 
}

li a{
    text-decoration: none;
}

Please (hopefully) see the result that I'm getting.

Screenshot

Sorry if this is not showing but basically that specific logo li is not fully offset to the left.

Any help would be gratefully received

Many Thanks.

2 Answers

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

Hi Anne, if you change .logo's margin from margin: auto to margin-right: auto it'll position li.logo as far as possible to the left. Hopefully that's the desired effect you're looking for.

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thank you so much for that! It works brilliantly..