I am new to CSS. Recently, I have been working around navigation bars and I encountered a problem. This navigation bar will not go to the top. By that I mean its coordination is supposed to be X:0 Y:0 but it keeps on staying at the center of the page. I can't think of anything. Can someone help me please?
Current code:
.buttonContainer {
display: flex;
border: 2px solid black;
border-bottom: none;
border-top: 1px solid black;
margin-top: 10px;
padding: 10px;
justify-content: space-around;
flex-direction: row;
background-color: gainsboro;
}
.mainContainer {
display: flex;
border: 2px solid black;
padding: 10px;
justify-content: space-around;
flex-direction: row;
background-color: gainsboro;
}
.innerContainer {
border: 1px solid black;
padding: top 40px;
left: 60px;
right: 60px;
bottom: 40px;
}
.Textarea {
border: black;
font-family: cursive;
padding: 100px;
}
.navBar {
display: flex;
position: sticky;
top: 0;
margin-bottom: 10px;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
.navBar:hover {
border: 2px solid black;
}
#Title {
color: black;
font-family: monospace;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="Notepad.css">
<title>Notepad</title>
</head>
<body>
<canvas id="canvas" width="device-width" height="device-height"></canvas>
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
<div class="buttonContainer">
<div>
<button onclick="Saves()" type="button" class="btn btn-primary btn-lg btn-block"><h3>Save</h3></button>
</div>
<div>
<button onclick="Clear()" type="button" class="btn btn-danger btn-lg btn-block"><h3>Clear</h3></button>
</div>
</div>
<div class="mainContainer">
<div class="innerContainer">
<textarea id="Text" class="Textarea" placeholder="Click to Type" maxlength="1000" cols="20"></textarea>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Notepad.js"></script>
</body>
</html>