Customizing template overriding css

[DARKF3D3]

Hello,

I'm trying to customize the default PS1.7.4 template.

To do this I created a child template based on it, and I'm using themes/mytheme/assets/css/custom.css to add my custom css.

But somethimes I'm having problem, because not always on my modification I can use the same css to override the original one.

I try to explain better...

I want to customize "NEW" badge showed on products in product list.

For changing background it's easy, and can be achieved in this way:

.featured-products .product-miniature .product-flags .new {
    background: #41b854;
}

But If i want to move it from left to right, i tried doing this, but the problem it's that the original css "left: -.4375rem;" it's still present, and since it's after mine, the badge it's showed on left:

.featured-products .product-miniature .product-flags .new {
    right: 0;
}

Do you know how to do this?

 

Thank you