Help with Flex Box

Hi webflowers,
I need help with Flex Box.

Right now, when you reduce the screen size, the yellow button wraps to the left side. I want it to be next to the search bar on the right side.

To ‘solve’ this, I did Justify: Right. But now, all components are to the right on a bigger screen.

What can I do so that, Flex box is Justify: Space Between and at the same time, the yellow button wraps to the right side?

Thank you. :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/online-lubricants?utm_medium=preview_link&utm_source=designer&utm_content=online-lubricants&preview=606df8459450b2cb45518e1c7cc1aea2&pageId=5cee803d3c0d6cc9bd89a6c8&mode=preview
(how to share your site Read-Only link)

Apply margin : auto to your nav links and you should be good to go.

1 Like

That worked like magic! :open_mouth:

Can you please explain the logic behind margin : auto ?

What margin: auto does is to push the element from that side to the limit of the other side, so if you apply auto to both sides then both sides are pushing the element so that makes it centred.

So why did the yellow button move to the right, instead of centre position? :upside_down_face:

Because you’re pushing the button only 5 px on the right margin:

40%20pm

1 Like

Aaaah… okay, I get it now! :nerd_face:

1 Like

@aaronocampo I was just testing this again and ran into a minor problem.

I made Margin: Auto for Search field so that it would stay on the right side, but it looks that’s stopping the yellow button from staying on to the right side.

And when I remove Margin: Auto, the Search field moves to the left side.

Is there anyway to fix this?