title: How to apply padding, and border in div(with multiple tags)?
body: <p>I'm trying to make a 'In Construction' page in HTML, and want to make a box in div only one. and, Texts are overlap when I add tag in text. (h1, h2..)</p>
  
  <p>I want to solve all of these!</p>
  
  <p>I expected that texts are not overlap, and one box covers all of texts.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        .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);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header&gt;
          &lt;div class="text"&gt;
              &lt;h1&gt;COMMING SOON&lt;/h1&gt;
              &lt;h2&gt;ABCDE&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>