Как я могу сделать тег H1 отзывчивым?

Привет всем мой вопрос заключается в следующем. Как я могу сделать тег H1 отзывчивым, чтобы он не сдвигал поля на моем изображении. Я использую bootstrap 4.5.2 для своего проекта.

Вот изображение в версии для ПК

Вот изображение в мобильной версии (тег H1 сместился на 1 поле влево)

Вот мой html-код

<!-- Button trigger modal -->
<button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenter">
    officeMap
</button>

<!-- Modal -->
<div class = "modal fade" id = "exampleModalCenter" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true">
    <div class = "modal-dialog modal-dialog-centered modal-xl" role = "document">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title" id = "exampleModalLongTitle">officeMap</h5>
                <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                    <span aria-hidden = "true">&times;</span>
                </button>
            </div>
            <div class = "modal-body" id = "dynamic-content">
                <img src = "PlanPage/Resources/grid.png" alt = "officeMap" class = "img-fluid">
                <div class = "room1"><h1>1</h1></div>
            </div>
            <div class = "modal-footer">
                <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>

Вот мой css

body {
    background-image: url('Resources/blurred_desk1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.room1 {
    position: absolute;
    bottom: 10%;
    left: 12%;
}

Изображение, которое я использую https://hbr.org/resources/images/article_assets/2013/04/grid.png