CSS !important and inline style being overwritten

Question

I am using Bulma to create a website and I have been having a weird issue with the Tabs component when being used in a Hero component. Tabs has a margin-bottom of 1.5rem by default. However, this is not something that I desire and I want to remove this. I tried using !important , used an id and also used inline styles to try to override this style but none of them have worked. Any help in this regard would be appreciated. I have attached the HTML and CSS rules along with this post. I have even tried using !important along with the inline style but none of it works. I have also , unticking the margin-bottom

Answer 1

Try margin-bottom: 0 instead of margin-bottom: none. Because none is not a valid value for margin.

Answer 2

There is two ways to approach it, either margin-bottom: 0 or margin-bottom: initial which by default is 0 in CSS. The correct way would be initial but either one should be fine