I’m sure it has something to do with the nav section but I’m not sure. the random stuff is just a placement for what is in there originally so you can ignore that. on another page of mine it does the same thing where my code goes into the header instead of below it, I copied the same header onto that page as well. I have tried moving the image and text to above the nav but that didn’t change anything.
thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<img class="first"src="./images/random.jpg" alt="">
<nav>
<div class="logo">
<h4></h4>
</div>
<ul class="nav-links">
</li>
<li> <a class="nav-links" href="./random.html">
random</a</li>
<li> <a class="nav-links" href="./random.html"></a>random</li>
<li> <a class="nav-links" href="./random.html"></a>random</li>
<li> <a class="nav-links" href="./random.html"></a>random<li>
</nav>
</div>
</section>
<section class="classes">
<div class="img">
<div class="About">
<h5>random text</h5>
<img src="./images/random.jpg" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
3
Answers
Your html is off. check it in w3 html validator link here
the image
<img class="first"src="./images/random.jpg" alt="">comes first in your body. As there is no styling, it is normal it comes at the head of your page.In addition images are inline elements. You should put them in a block element like a paragraph.