I'm encountering an issue while developing a basic website. The text within the main tag is overlapping with the header tag. I've built simple webpages in the past without facing this problem. Isn't the text in the <main> tag supposed to automatically appear below the header? My understanding of the structure of an HTML page is:
Header
Main
Footer
.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;
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;
}<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>