I'm applying some properties in css But my properties aren't applied because of bootstrap's css property. I don't know what i should type

Question

enter image description here

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    **padding-right: calc(var(--bs-gutter-x) * .5);**
    **padding-left: calc(var(--bs-gutter-x) * .5);**
    margin-right: auto;
    margin-left: auto;
}


.container-fluid {
    padding: 3% 15%; //I'm trying to implement this.
}

Because of.container-fluid's property my padding aren't applied in left and right side only. I want padding in left and right side.

I also tried applying: padding-left: 0; padding-right: 0;

Nothing is working!!!

Answer 1

for such problem I would prefer to see html as well. From what you shared uI suggest you override the css by using its parent.container

code:

.container .container-fluid 
 {
   padding-left: 0px; 
   padding-right: 0px;
 }