My site keeps stretching itself, how can I fix it?-CodePudding

The block you are seeing is there to flash two different colors but since I have to shift it so far it extends my page. Is there any fix for this?

@keyframes blinking {
  0% {
    color: #FFFFFF;
  }
  */
  100% {
    color: #393939;
  }
}
#demo {
  font-size: 1.3em;
  font-weight: bold;
  animation: blinking 0.5s infinite;
}
html {
  width: 720;
  height: auto;
  background: #393939;
  /* Fills the page */
}
h3 {
  color: #393939;
  font-family: "Courier New", Courier, monospace;
  position: relative;
  left: 795px;
  bottom: 48px;
}
h2 {
  color: #C8C8C8;
  font-family: "Courier New", Courier, monospace;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2> This is my demo website for people who want to hire me! 
      <h3 id="demo">█</h3>
    </h2>
  </body>
</html>

CodePudding user response：

I'm not entirely sure what you want it to look like, but I've seen this kind of website design before. If I'm right, then you don't have to shift it at all. Is this what you're looking for?

@keyframes blinking {
  0% {
    color: #FFFFFF;
  }
  */
  100% {
    color: #393939;
  }
}
#demo {
  font-size: 1.3em;
  font-weight: bold;
  animation: blinking 0.5s infinite;
  
  color: #393939;
  font-family: "Courier New", Courier, monospace;
}
html {
  width: 720;
  height: auto;
  background: #393939;
  /* Fills the page */
}

h2 {
  color: #C8C8C8;
  font-family: "Courier New", Courier, monospace;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2> This is my demo website for people who want to hire me!<span id="demo">█</span></h2>
  </body>
</html>