Как расположить текст ровно?

Question

[TarasKovtynovuch]

Как расположить текст ровно?

<div class="container">
    <div id="services" class="row wow fadeInLeft">
      <div class="col-sm-9 col-md-3 col-lg-3 ml-auto">
        <h1 id="services-number">01</h1>
      </div>
      <div class="col-sm-9 col-md-3 col-lg-3 ml-auto">
        <h1 id="services-number">02</h1>
      </div>
      <div class="col-sm-9 col-md-3 col-lg-3 ml-auto">
        <h1 id="services-number">03</h1>
      </div>
      <div class="col-sm-9 col-md-3 col-lg-3 ml-auto">
        <h1 id="services-number">04</h1>
      </div>
    </div>
  </div>

#services{
	height: 500px;
	margin-top: 20%;
}

#services-number{
	position: absolute;
	top: -25%;
	right: 90px;
	color: #d7d7d7;
	font-size: 130px;
	font-weight: 900;
	font-family: Gilroy Black;
	writing-mode: vertical-lr;
	transform: scale(-1);
	z-index: 0;
}

Comments

[Кирилл Никитин]

Начнём с того, что нарушена иерархия заголовков h1-h6 и id со значением services-number может быть только один во всём документе. Ровно по отношению к чему?

[Eugene Chefranov]

Моноширный шрифт нужен

[SagePtr]

А если поворачивать не через writing-mode: vertical-lr, а через transform, и в качестве оси поворота выбрать ту точку, которая имеет одинаковое расстояние до буквы по обеим осям? например, по горизонтали выровнять текст по левому краю, по вертикали по низу, и поворачивать вокруг левого нижнего угла на 90 градусов против часовой стрелки?

[TarasKovtynovuch]

SagePtr, спасибо!