I have attempted numerous variations, but I am at a loss for what to do next.
Every time I modify top:0px in kontener and introduce margin:42px in kontener_auto_2 at the bottom, the site looks fine, except the upper scroll and kontener are positioned under nav.
The desired outcome is for the scroll to be below #nav while still being visible entirely.
html {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
background-color: #000000;
z-index: 99;
border-bottom: 2px solid #4d93d1;
-webkit-box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
}
#kontener {
position: absolute;
top: 42px;
left: 0px;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
background-color: #1F1F1F;
}
#kontener_auto {
padding: 0px;
height: 100%;
overflow: auto;
}
#kontener_auto_2 {
margin-left: 20px;
margin-top:20px;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(182px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
margin-right: 20px;
}
#tumble {
float: left;
height: 180px;
width: 250px;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="temp.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="nav"></div>
<div id="kontener">
<div id="kontener_auto">
<div id="kontener_auto_2">
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
</div>
</div>
</div>
</body>
</html>I am urgently seeking assistance on how to make my dream effect a reality.