CSS !important and inline style being overwritten

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

Solution

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