Как отодвинуть заголовок от кружка?

Question

[Andrew Foy]

<section class="all_inclusive">
  		<div class="container">
  			<div class="section-header section-header_active">
  				<h2>Все на 100% включено!</h2>
  				<p>При выполнении работ с нашим материалом в стоимость входит:</p>
  			</div>
  			<div class="row">
  				<div class="col-lg-3">
  					<div class="media">
  						<div class="media-left">
  							<span class="circle-border">
  								<span class="circle">
  									1.
  								</span>
  							</span>
  						</div>

  					  <div class="media-body">
  					    <h4>Media heading</h4>
  					  </div>
  					</div>
  				</div>
  			</div>
  		</div>
  	</section>

.media {
	display: flex;
	.bold();
}
.circle {
	display: inline-block;
	background-color: @icons-color;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.circle-border {
	display: inline-block;
	width: 5rem;
	height: 5rem;
	padding: 0.3rem;
	border: 2px solid @icons-color;
	border-radius: 50%;
	text-align: center;
	line-height: 4rem;
	color: @light;
	.bold();
	font-size: 1.9rem;
}
.media-body {
	margin-top: 1.5rem;
}

Comments

[Ankhena]

У вас очччень много лишних тегов для этого.
Заголовок это один тег. Цифра это псевдоэлемент.
Отступы между элементами это margin, иногда используют paddingдля достижения визуального эффекта.
Вот так https://jsfiddle.net/uc5njh92/

Но, вероятно, вам нужно нумеровать заголовки. Ставить порядковые номера руками, прямо скажем, не удобно, для этого есть CSS свойства counter-reset и counter-increment.
Так: https://jsfiddle.net/pe6aq23h/

Answer 1

[Steppp]

А где в верстке Заголовок (который около кружка написан?)

Вот ему и

.класс заголовка {
  display: flex;
  margin-left: 50px; или padding-left: 50px;
}

Comments

[Andrew Foy]

не помогло(