How to not make negative margin cause sideways scrolling

I have a tab header at the top of my page with a -4 margin on both the left and the right so the buttons have spacing between eachother but not between the sides of the screen, however loading the real site (not preview mode) it shows a sideways scroll, how can i get rid of this?


Here is my site Read-Only: [LINK](Webflow - Philly Dawn Pride)
(how to share your site Read-Only link)

hi @Philadelphia_Dawn the reason you have space on side you are trying rid of with negative margin is wrong approach. Instead of using margin 2px on L & R on each individual tab you should use gap:4px on your parent element with space-between. This will solve your issue. If you would like to know why you can refer to any flexbox tutorial to learn how flexbox works.

Thank you so much,
this works perfectly

1 Like