h1
является элементом уровня блока, и большинство браузеров устанавливают ширину 100% для элементов уровня блока.Вы должны использовать flex
CSS, чтобы исправить это:
.container {
display: flex;
justify-content: center;
}
.head-tag {
color:blue;
background-color:green;
}
<body>
<div class="container">
<h1 class="head-tag">text</h1>
</div>
</body>