I have a fixed position navigation bar at the top, and a canvas. Unfortunately, the top of my canvas is being hidden behind the navigation bar. I do not want to change the canvas position to absolute. I need to position the canvas below the navigation bar and center it horizontally. I tried using the center tag to center it, but I am unable to move it below the navigation bar. How can I achieve this? Below is a snippet of my stylesheet:
CSS
#nav{
position:fixed;
margin:0px;
display:block;
}
#canvas{
text-align:center;
background-color:transparent;
border: 2px solid black;
display:block;
}
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="IV.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<div id = "toolbar_effects">
<input type="image" src="Icons/imageviewer.svg" width="50" height="50" id="Imageviewer2"class = "s">
<input type="image" src="Icons/effect-grayscale.svg" width="50" height="50" id="grayscale"class = "s">
</div>
</nav>
<center><canvas id = "canvas" width="600" height="400"><center>
</canvas>
</body>
</html>