I am experiencing an issue with the placement of an image in my HTML code. When I place the image inside the nav element, it works perfectly fine. However, when I try to put it inside the body or header elements, it doesn't display properly. I am new to HTML and still learning, so any help would be greatly appreciated. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title> Random Site </title>
<style type = 'text/css'>
header nav {
float: right;
background-color: gray;
width: 100%;
position:absolute;
top:0px;
left:0px;
right:0px;
height: 60px;
}
header nav a {
font-size: 120%;
float: right;
padding: 1%;
font-family: 'Helvetica';
text-decoration: none;
color: black;
position: relative;
top: 5px
}
header nav a:hover {
color: white;
}
</style>
</head>
<body>
<img src = 'image.jpg' alt= 'image' width= '100px' height= '70px'/>
<header>
<nav>
<a href = 'www.google.com'> games </a>
<a href = 'www.google.com'> about </a>
<a href = 'www.google.com'> contact </a>
</nav>
</header>
</body>
</html>