title: HTML div cuts other div off
body: <p>Hello I have a little web page and my problem is that 1 <code>div</code> cuts out a part of my second <code>div</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/LvE87.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LvE87.png" alt="enter image description here"></a></p>
  
  <p>As you can see the 3 gets cut I think its a <code>CSS</code> Problem but I don't know where...</p>
  
  <p>HTML(just the part with the 2 divs):</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>* {
    cursor: none !important;
    overflow: hidden;
  }
  .number {
    height: 60%;
    width: 100%;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  h1 {
    font-size: 500pt;
    margin: 0;
  padding:0  background-color: transparent;
  }
  p {
    font-size: 70pt;
    margin: 0;
    padding: 0;
  }
  .names {
    position: relative;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: 0;
    padding: 0;
    background-color: rgba(255,255,255,0);
    width: 400px;
    height: 40%;
    text-align: center;
  }
  body {
    background-color: black;
    color: white;
    font-family: arial;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .lauftext {
    height: 100%;
    font-size: 70pt;
  }
  @keyframes marquee {
  0% {
  text-indent: 100%
  }
  100% {
  text-indent: -100%
  }
  }
  @-webkit-keyframes marquee {
  0% {
  text-indent: 100%
  }
  100% {
  text-indent: -100%
  }
  }
  .lauftextdiv {
    height: 100%;
  }
  .lauftext {
    height: 200pt;
    position: absolute;
    font-size: 200pt;
    top: 50%;
    width: 100%;
    margin: auto;
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 7s linear infinite;
    webkit-animation: marquee 7s linear infinite;
  }
  @keyframes rotate {
  from {
  transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
  }
  @-o-keyframes rotate {
  from {
  transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
  }
  @-moz-keyframes rotate {
  from {
  transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
  }
  @-webkit-keyframes rotate {
  from {
  transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
  }
  .number_full {
    text-align: center;
    animation: rotate 7s linear infinite;
    -webkit-animation: rotate 7s linear infinite;
    -o-animation: rotate 7s linear infinite;
    -moz-animation: rotate 7s linear infinite;
  }
  .number_full h1 {
    text-shadow: 0 0 100px #777;
    transform: rotateX(20deg);
    padding: 100px;
    font-size: 600pt;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name=viewport content="width=device-width" , inital-scale=1.0&gt;
    &lt;link rel="stylesheet" href="../layouts/style.css"&gt;
    &lt;script src="../reload.js"&gt;&lt;/script&gt;
    &lt;title&gt;3&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="number"&gt;
      &lt;h1&gt;3&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="names"&gt; Marc
      ... 
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>