Flex end and margin-left: auto is adding spacing

HTML & CSS
1

Hi there,

I am having some issues with a header bar.

I currently have my logo and logo text to the left and my navigation to the right.

I am using align-items: flex-end and margin-left: auto which is aligning my navigation to the right, but when I scale down my page, to the first breakpoint using Bootstrap, it is adding some spacing to the left of the navigation.

Can anyone tell me how I can stop the space from being added?

I am basically would like the logo and logo text to the left and the navigation aligned to the right.

I have a fiddle here:

Any help would be great. Thanks!

2

I had similar problem and I got help from

Does this helps you?

4

I don’t see any spacing?

The logo moves because you set the container to 720px max width at that breakpoint and therefore the centering of the whole row changes but you don’t get any extra spacing to the left of the logo text. Just add a background color to the parent and you will see no extra space.

Note that you don’t need the flex-end rule as margin-left:auto automatically pushes the element as far as it can to the side.

5

Hi,

Thanks for the reply. It’s actually the nav that is adding space to the left of it whe it hits the first breakpoint. I think I have fixed it by reducing the space between the nav items

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.