如何在div（带有多个标签）中应用填充和边框？

Question

我正在尝试用HTML创建一个“正在构建”页面，并且只想在div中创建一个框。并且，当我在文本中添加标签时，文本会重叠。 （h1，h2 ..）

我想解决所有这些问题！

我希望文本不会重叠，并且一个框会覆盖所有文本。

        .text {
            padding: 30px;
            border: 3px black;
            background-color: rgba(128, 128, 128, 0.5);
        }

        .text h1 {
            font-family: 'Pacifico', cursive;
            font-size: 40px;
            font-weight: 300;
            text-align: center;

            color: white;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            text-shadow: 1px 1px 4px rgb(30, 30, 30);
        }

        .text h2 {
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 40px;
            font-weight: 300;
            text-align: center;

            color: white;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            text-shadow: 1px 1px 4px rgb(30, 30, 30);
        }

    <header>
        <div class="text">
            <h1>COMMING SOON</h1>
            <h2>ABCDE</h2>
        </div>
    </header>