Hi
I have been working on the “Responsive Club Website” challenge and I have an issue with button margins in CTA.
When I hover the button I am applying 2px of margin top and left, but the parent element is also affected when button margins are applied.
You can see my code and project here:
https://soulksyoux.github.io/codecademy_flexbox_custom_project_bikersclub/
Can you give some advice to overcome this issue?
Thanks
That is because you are creating a div and you style it as a button instead of actually using a button. Due to the fact that you add the class cta-button on the div, then the whole div moves and because you have everything on flex, then the whole box changes.
You can try and inspect the button via the dev tools that your browser provides. You can see the outline for the div which is getting bigger by the hovering effect you wrote.
I would suggest leave the div, but create a button that has some space between itself and the parent div. That way when the hover takes place your button has space to grow.