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

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,220 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

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