title: Why does html body have overflow?
body: <p>I am learning front-end development by trying to clone <a href="https://mozilladevelopers.github.io/playground/" rel="nofollow noreferrer">https://mozilladevelopers.github.io/playground/</a> . Everything is fine, except that in devtools, <code>&lt;body&gt;</code> element has overflow, which can be traced down to overflow in <code>&lt;header&gt;</code> and <code>&lt;section class=&quot;home&quot;&gt;</code>. I am still trying to figure out exactly what is causing the overflow.</p>
  <p>Apparently, removing <code>&lt;img&gt;</code>, <code>&lt;h1&gt;</code>, and <code>&lt;p&gt;</code> from the <code>&lt;section class=&quot;home&quot;&gt;</code> fixes this.</p>
  <p>This is the demo on codepen: <a href="https://codepen.io/yahyamateen2/pen/ExoOGbp" rel="nofollow noreferrer">https://codepen.io/yahyamateen2/pen/ExoOGbp</a> . Also, my browser is Mozilla Firefox 99.0, in case that is useful to know. Thanks in advance for any help or guidance.</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>*,
  *::before,
  *::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  h1 {
    font-family: "Antonia", sans-serif;
    font-size: 3.8rem;
    line-height: 4.8rem;
    text-transform: uppercase;
    font-weight: 300;
  }
  
  p {
    font-family: "Open Sans", sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 400;
  }
  
  a {
    outline: none;
    text-decoration: none;
  }
  
  button {
    font-family: "Segoe UI", sans-serif;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
  }
  
  img {
    display: inline-block;
    vertical-align: middle;
  }
  
  ul,
  ol {
    list-style: none;
  }
  
  /* Layout */
  .home {
    background-color: #306ffd;
    background-image: linear-gradient(60deg, #306efe, #003ab7);
    padding-top: 8rem;
    padding-bottom: 14.4rem;
    position: relative;
    text-align: center;
    color: #ffffff;
  }
  .home &gt; img:first-child {
    width: 80px;
  }
  
  .home &gt; img:first-child,
  .home p {
    margin-bottom: 4.8rem;
  }
  
  .home p {
    margin-top: 2.4rem;
  }
  
  .download-button {
    background-color: #ffffff;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #306ffd;
    padding: 1.6rem 2.4rem;
    border-radius: 5rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease;
  }
  
  .download-button:focus,
  .download-button:active,
  .download-button:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  }
  
  .download-button img {
    width: 14px;
    height: 14px;
    margin-right: 1rem;
  }
  
  .home svg {
    position: absolute;
    bottom: 0;
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section class="home"&gt;
      &lt;img src="https://mozilladevelopers.github.io/playground/static/ffde-logo.0a69ffe8.png" alt="" /&gt;
      &lt;h1&gt;Firefox DevTools Playground&lt;/h1&gt;
      &lt;p&gt;Learn, build, improve, and create with Firefox DevTools.&lt;/p&gt;
      &lt;a
        href="https://www.mozilla.org/firefox/developer/?utm_source=moz-playground&amp;amp;utm_medium=referral&amp;amp;utm_content=index-hero"
        target="_blank"
      &gt;
        &lt;button class="download-button"&gt;
          &lt;img
            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxMXB4IiB2aWV3Qm94PSIwIDAgMTEgMTEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMjAxNy4wOS4xNC5QbGF5Z3JvdW5kLkNTU0dyaWQtLS0xQDJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIxMi4wMDAwMDAsIC00Mi4wMDAwMDApIiBmaWxsPSIjMzA2RkZEIj4KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTMuMDAwMDAwLCAtNTgzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmtzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgzLjAwMDAwMCwgNjEwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMTEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMi1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4zMjA0NDIsIDIwLjI0NDg1Mikgc2NhbGUoLTEsIC0xKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTE2LjMyMDQ0MiwgLTIwLjI0NDg1MikgdHJhbnNsYXRlKDEwLjgyMDQ0MiwgMTUuMjQ0ODUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNDYyNTM3MSw1LjYwMTg0ODQxIEMxMC43OTQ4NzY0LDUuMjU5NDA1OTYgMTAuNzkxMjg4OSw0LjcwNDA1Nzk5IDEwLjQ1ODYyMzQsNC4zNjE2MTU1NCBMNi41MDgwNTc0NCwwLjMwOTc2NzQ2OSBDNS41ODU3MjYwMywtMC42Mjk1NDExOTEgNC4yMDE5MDI3NiwwLjc3OTQyMTggNS4xMjQ1NjAzMiwxLjcxODczMDQ2IEw2Ljg0ODIyNDIzLDMuNDc0MTIxNjUgQzcuMTM0OTAzNjIsMy43NjYwNzc5MSA3LjAzOTM0MzgyLDQuMDAzNTYyMjQgNi42MzY1NTc2NSw0LjAwMzU2MjI0IEwwLjk3ODQyNzk1Miw0LjAwMzU2MjI0IEMwLjQzODAwOTU4LDQuMDAzNTYyMjQgMy41NTI3MTM2OGUtMTQsNC40NDk5NjYzNiAzLjU1MjcxMzY4ZS0xNCw1IEMzLjU1MjcxMzY4ZS0xNCw1LjU1MDAzMzY0IDAuNDM4MDA5NTgsNS45OTY0Mzc3NiAwLjk3ODQyNzk1Miw1Ljk5NjQzNzc2IEw2LjYzNjU1NzY1LDUuOTk2NDM3NzYgQzcuMDQwNjQ4MzksNS45OTY0Mzc3NiA3LjEzNzE4NjYyLDYuMjMyNTkzNTEgNi44NDgyMjQyMyw2LjUyNzIwNjk0IEw1LjEyNDU2MDMyLDguMjgxMjY5NTQgQzQuMjAxOTAyNzYsOS4yMjA1NzgyIDUuNTg1NzI2MDMsMTAuNjI5NTQxMiA2LjUwODA1NzQ0LDkuNjkwMjMyNTMgTDEwLjQ2MjUzNzEsNS42MDE4NDg0MSBaIiBpZD0iUGFnZS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjM1NDk4MiwgNS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTUuMzU0OTgyLCAtNS4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="
            alt="Arrow pointing down"
          /&gt;Firefox Developer Edition
        &lt;/button&gt;
      &lt;/a&gt;
      &lt;svg width="100%" height="47px" viewBox="0 0 1440 47" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"&gt;
        &lt;g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
          &lt;path
            d="M0,0.0577405639 C117.504588,18.44359 269.602477,22.1720696 456.293666,11.2431795 C562.076057,5.05068514 730.784198,0.911127653 885.297232,3.27366179 C1157.17617,7.43074321 1386.98062,21.3276838 1440,38.3891927 L1440,46.9388979 L0,46.9388979 L0,0.0577405639 Z"
            fill="#FFFFFF"
          &gt;&lt;/path&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>