Проблемы с границами и встроенными тегами

Question

Я пытался создать тег <p> с рамкой внизу посередине изображения. Но я столкнулся с некоторыми проблемами. Для начала я добавил атрибут display: inline, чтобы граница отображалась только под текстом, но тогда я не смог выровнять текст, поэтому моей первой идеей было добавить поля и вручную отредактировать границы, но когда я меняю уровень масштабирования или переключитесь на мобильный вид, границы проблемы снова появились.

Вот мой код, если кто-нибудь может найти способ выровнять текст с помощью display:block; или любого другого решения моей проблемы.

p#p01 {
  text-align: center;
  display: block;
  border-bottom: solid black;
}

div#div03 {
  background-image: url("background.jpg");
  width: 1000px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}

<div id="div03">
  <p id="p01">TESTE TETSTEE</p>
</div>

Answer 1

Вы можете изменить width: 1000px на width:100% для div#div03

p#p01 {
  text-align: center;
  display: block;
  border-bottom: solid black;
}

div#div03 {
  background-image: url("background.jpg");
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}

<div id="div03">
  <p id="p01">TESTE TETSTEE</p>
</div>

Answer 2

Вы должны определить толщину границы. В противном случае он не появится.

p#p01 {
  text-align: center;
  display: block;
  border-bottom: 1px solid black;
}

Удачного кодирования!