<main> moving when adding <h2>

November 4, 2022

On my replit I’ve made a home page and want the "news" page to be the same, but with a h2, but it moves the main.

CSS

:root{
  font-family: Arial, Helvetica, sans-serif;
}
body{
  background-color:green;
}

#epicloader{
  background-color: black;
  padding: 1rem;
}
.circle1{
  width: 100px;
  height: 100px;
  border: 3px solid white;
  border-radius: 100%;
  border-right: 3px solid black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  animation: spin1 1s linear infinite;
}

.circle2{
  width: 70px;
  height: 70px;
  border: 3px dotted #6e3030;
  border-radius: 100%;
  border-right: 3px solid black;
  animation: spin2 4s linear infinite;
}


@keyframes spin1{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

@keyframes spin2{
  from{
    transform: rotate(0deg);
  }
  50%{
    border: 3px dotted #1e62eb;
    border-right: 3px solid black;
  }
  to{
    transform: rotate(360deg);
  }
}
.hidden{
/*   screen reader only hidden */
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
a{
  color: inherit;
    text-decoration: none;
}
a:hover{
  color:red;
  text-decoration: underline;
}
ul{
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 5px;
  position: relative;
  bottom: 15px;
}
nav{
  border: 2px solid black;
  max-width: 700px;
  margin: 0 auto;
  background-color:white;
  max-height: 15pt;
}
header{
  margin: 0 auto;
  max-width: 703px;
  max-height: 125px;
  height: 125px;
  justify-content: center;
  background-color:blue;
}
header img{
    max-width: 703px;
}

main{
  max-width: 700px;
  margin: 0 auto;
  border: 2px solid black;
  border-top:none;
  max-height: 650px;
  height: 650px;
  background-color:white;
}


footer{
  background-color:white;
  border: 2px solid black;
  max-width: 700px;
  margin: 0 auto;
  font-size: small;
  text-align: right;
  border-top:none;
}

h2{
  text-align:center;
  color:Black;
}

Home Page HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="thethingihate.js"></script>
  <div id="epicloader">
    <div class="circle1">
      <div class="circle2"></div>
    </div>

  </div>

  <header>
    <h1 class="hidden">durbie</h1>
    <a href="/"><img src=""> </a>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="news">News</a></li>
      <li><a href="/">Guestbook</a></li>
      <li><a href="/">About</a></li>
    </ul>
  </nav>


  <main>

  </main>
  <footer>
    <strong>100% not stolen</strong>
  </footer>
</body>

</html>

News page HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <link href="/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="/thethingihate.js"></script>
  <div id="epicloader">
    <div class="circle1">
      <div class="circle2"></div>
    </div>

  </div>

  <header>
    <h1 class="hidden">durbie</h1>
    <a href="/"><img src=""> </a>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="news">News</a></li>
      <li><a href="/">Guestbook</a></li>
      <li><a href="/">About</a></li>
    </ul>
  </nav>


  <main>
<h2>work code boy</h2>
  </main>
  <footer>
    <strong>100% not stolen</strong>
  </footer>
</body>

</html>

Home: https://more-tests-because-i-am-coool.thedurbie.repl.co/
News: https://more-tests-because-i-am-coool.thedurbie.repl.co/news/

Replit: https://replit.com/@TheDurbie/more-tests-because-i-am-coool#news/index.html

I tried messing with CSS but nothing worked