Why can't I text-align:center this heading?

Question

css

<section id="team" class="team-area area-padding">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="section-headline text-center">
            <header class="section-header">
              <h3>ОТЗЫВЫ:</h3>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
          </div>
        </div>
      </div>

.section-header h3 {
  text-align: center;
  font-size: 32px;
  color: #111;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
}

.section-header h3::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-header h3::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  bottom: 0;
  left: calc(50% - 20px);
}

.section-header p {
  text-align: center;
  padding-bottom: 30px;
  color: #333;
}

I found a piece of bootstap code and decided to put the style into my project, but for some reason it comes in correctly.

I've tried everything I can, I just can't figure out why I can't text-align: center h3 itself,
and if you change it to , it works without problems

And if you stick the code into pure html, it also works without problems