I have been attempting to align the div with class bioDiv under the image, but despite various attempts, I find myself feeling more and more confused. Can someone please review the code for me and offer a clue? I want to retain the same appearance, just relocate the div to a more centralized position.
Here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
@import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod"><a href="index.html">Home</a></h2>
<br>
<h2 style="color: goldenrod"><a href="bio.html">Biography</a></h2>
<br>
<h2 style="color: goldenrod"><a href="ed.html">Education</a></h2>
<br>
<h2 style="color: goldenrod"><a href="gd.html">Graphic Design</a></h2>
<br>
<h2 style="color: goldenrod"><a href="free.html">Freelance</a></h2>
<br>
<h2 style="color: goldenrod"><a href="baking.html">Baking</a></h2>
<br>
<h2 style="color: goldenrod"><a href="photo.html">Photo Gallery</a></h2>
<br>
<h2 style="color: golden