problems with gradient effect in css

I’m doing a shadow effect with gradients on my titles, and there are several sections that I’m adding this effect to. It was working but in the last one it didn’t work. It’s something to do with positioning. I’m using a shared class with the other two titles, but the last one didn’t work. when i use the google inspector the box seems bigger than it should be, and that’s why the gradient doesn’t work. and I don’t know how to fix it.

in theory the three titles should look the same but the last class to be added does not see the other twoenter image description here

.about__services,
.about__reviews,
.about__clients{
  width: 100%;
  margin-bottom: 3rem;
}
.services__header,
.reviews__header,
.clients__header{
  display: inline-block;
  padding-right: 1.2rem;
  margin-bottom: 2.5rem;
  position: relative;
}
.services__title,
.reviews__title,
.clients__title{
  font-size: 2.1rem;
}
.services__title::after,
.reviews__title::after,
.clients__title::after{ 
  content: "";
  position: absolute;
  top: 15px;
  right: 0px;
  width: 30px;
  height: 20px;
  background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px, transparent 0px, transparent 100%);
  background-size: 6px 6px;
  opacity: 0.5  ;
}

the class that doesn’t work is: clients

enter image description here

first I tried to remove the right property, but that affected the other classes, second I tried to make another pseudo after element just for the clients class to be able to modify without altering the other classes and it didn’t work either. the effect works when i clear the right property but only on clients. and the other classes are affected.