Почему отступы вправо и влево не влияют на границу h1?

Question

Я борюсь с этой проблемой: введите описание изображения здесь

Я хочу, чтобы отступы моего заголовка были равны 1px влево и вправо, но хотя я поместил это в файл css,Граница по-прежнему занимает весь экран горизонтально ... Я хочу, чтобы моя рамка соответствовала тексту, а не расширяться таким образом. Спасибо, если вы можете помочь. Это HTML для h1: <h1 title="they kidnapped me">Doing some testing here</h1><hr>

Answer 1

H1 по умолчанию является блочным элементом, занимающим всю строку.Сделайте его встроенным, и он займет только то место, которое занимает текст.

body {
  color: white;
  background-color: #192e51;
}

.testing {
  border: 1px double white;
  border-radius: 100px;
  display: inline;
}

.content {
  text-align: center;
}

<div class="content">
  <h1 class="testing"> Doing some testing here </h1>
</div>