I've been tasked with creating a complete page layout. My goal is to fill all the empty spaces between my layout colors using grid, but I'm facing an issue where I can't fully span the navbar to take up the entire space at the top of the browser. There seems to be some margin that I can't override.
I've attempted to use grid-template-column: 1/5 and other methods, but I'm struggling to figure it out. The code snippets are provided below:
html,
body {
display: grid;
grid-col height: 100%;
width: 100%;
}
.zone {
padding: 30px 50px;
margin: 40px 60px;
cursor: pointer;
display: inline-block;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
/* Remaining CSS code for different background colors */
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="zone green">Header</div>
<div class="zone red">Cover</div>
<div class="zone blue">Project Grid</div>
<div class="zone yellow">Footer</div>
</body>
</html>