I am struggling with the placement of a div on my webpage. I have tried various methods to position it beneath two other elements without success, despite following advice from online resources. Here is the code I have been working with:
#headingmain {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#main {
margin: 0 auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#para {
position: relative;
top: 150px;
font-family: Comic Sans MS;
}
#test {font-family: Comic Sans MS;}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center" id="headingmain">Title</h1>
<p id="para" align="center">para</p>
<div id="main" align="center">
<p id="test">Test</p>
</div>
</body>
</html>
I have exhausted all available tutorials in an attempt to properly position the div below the existing elements. Any guidance or assistance would be greatly appreciated.
Thank you in advance!