I'm trying to build basic website, I'm having problems with text in main tag overlapping with header tag. I've created other simple webpages before and I've never had this problem, I thought that the text in the `<main>` tag was automatically put below the header? I was under the impression that the HTML page went like this:

```
Header
Main
Footer

```

```css
.header-nav {
  float: right;
  list-style: none;
  margin-top: 10px;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.header-nav li {
  display: inline-block;
}

.header-nav li a {
  color: black;
  text-decoration: none;
  padding: 25px;
  25px;
  font-family: "Verdana", sans-serif;
  font-size: 14px;
}

.header-nav li.active a {
  border: 1px solid white;
}

.header-nav li a:hover {
  border: 1px solid white;
}

.dota2icon img {
  width: 150px;
  height: auto;
  float: left;
}

.bodytext {
  font-family: "Verdana", sans-serif;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

h1 {
  color: black;
  text-transform: uppercase;
  font-size: 24px;
  text-align: left;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
```

```html
<header>
  <!-- NAVIGATION BAR START -->

  <div class="dota2icon">
    <img src="dota2icon.png">
  </div>
  <div class="row">
    <ul class="header-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="categories.html">Categories</a></li>
      <li><a href="item.html">Services</a></li>
      <li><a href="myItems.html">Contact</a></li>
    </ul>
  </div>
  <!-- NAVIGATION BAR END -->
</header>

<main>
  <!-- DESCRIPTION -->
  <div class="bodytext">
    <h1>Dota 2 Guides</h1>
    <p>TEST TEST TEST TEST TEST </p>
  </div>

</main>

<div class="footer">

</div>
```