How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Opus</title>
<link href="opus.css" rel="stylesheet" type="text/css" />
<div class="logo">
<img class="coverPhoto" src="images/coverPhoto.jpg" alt="Cover Photo" height="300" width="1330">
<img src="images/opus1.jpg" alt="Logo" height="500" width="600">
</div>
<body>
<div class="nav">
<ul>
<li id="home"><a href="#"> Home</a></li>
<li id="about"><a href="#"> About</a></li>
<li id="more"><a href="#"> More</a></li>
</ul>
</div>
</body>
</head>
CSS
body {
background-color: rgb(104, 0, 1);
}
#home {
}
#about {
}
#more {
}
li {
display: inline-block;
}
ul {
list-style-type: none;
text-align: center;
}