I need to nullify (not to counter) effect of parent CSS file - html

Question

First of all, I am working on "rtl" directional web pages.
And, I am using bootstrap component called "breadcrumbs", in my shop.html template. Therefore, I want my breadcrumbs in right to left direction.
<div class="breadcrumb">
<div class="container" align="right">
<a class="breadcrumb-item" href="{% url 'bookrepo:home' %}">صفحہ اول</a>
<span class="breadcrumb-item active"> خریداری </span>
</div>
</div>
I have made my own shop.css file for cutomized styling. Now, issue is that though I have done align:"right" in my template.
But parent file of bootstrap overriding its placement to left. By (https://maxcdn.bootstrapcdn.com/bootstrap/scss/_breadcrumb.scss):
.breadcrumb-item {
float: left;
}
So, it is like that now:
Where I want it to float:right. So what I did in my shop.css is that:
.breadcrumb-item {
float: right;
}
But it didn't go according to plan. It is ruining orientation of breadcrumb. Have a look at it:
So, it means I don't want it to float in neither direction. When I un-apply both it works fine.
Have a look at it:
Obviously, I can erase float:right from my shop.css. So, now guide me to the way to nullify bootstrap's css effect which is float:left.

Answer 1

you need to clear the float
.breadcrumb-item {
clear:both;
float: right;
}