I want to code a website with a nabber on the side. The Problem is: when I scroll down, on top of the nagar is a gap of 108px and I don't know how to fix it
Here is my HTML Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>blog</title>
<style>
@import url("CSS_20240306.css");
</style>
</head>
<body>
<header>
</header>
<aside>
<h2 class="mich">about me</h2>
<img src="hallo.jpg" alt="Ein Foto von mir" width="100px" id="ich">
<p>interested in:</p>
<ul>
<li><a href="">movies</a></li>
<li><a href="">music</a></li>
<li><a href="">books</a></li>
<li><a href="">games</a></li>
</ul>
</aside>
<div id="content">
<h2 class="blog">werners blog</h2>
<p class="datum">21.Februar 2024</p>
<div class="rahmen">
<p class="inhalt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br>
<br>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
</div>
<p class="datum">20.Februar 2024</p>
<div class="rahmen">
<p class="inhalt">Hallo</p>
</div>
</div>
</body>
</html>
And here is my CSS Code
body {
padding:0;
margin:0;
}
header {
/*border:1px solid black;*/
height:108px;;
background-color:#95e5ff
}
aside {
/*border:1px solid black;*/
height:100%;
width:480px;
background-color:#8cd78c;
/*float:left;*/
position:fixed; /*bleibt an Ort und Stelle wenn scrollen*/
z-index:-1; /*oberste Ebene*/
left:0;
overflow-x:hidden; /*kein scrollen möglich*/
top:0;
padding-top:108px;
}
Img {
border:1px solid black;
}
#ich {
display: flex;
align-items: center;
justify-content: center;
}
#content {
/*float:none;*/
/*border:1px solid black;*/
margin-left:480px;
height:100%;
background-color:#e5e5e5;
}
.mich {
border:1px solid black;
display: flex;
align-items: center;
justify-content: center;
margin-top:0;
}
Ul {
list-style:none;
}
P {
/*border:1px solid black;*/
margin-top:0;
}
.rahmen {
border:3px solid black;
height:auto;
width:1340px;
margin:auto;
}
.inhalt {
margin: 10px 10px 10px 10px;
}
.datum {
margin-top:40px;
margin-left:50px;
margin-bottom:15px;
font-size:30px;
}
.blog {
border:1px solid black;
margin-top:0;
margin-left:50px;
font-size:100px;
font-family:"DIN Alternate";
}
I tried some stuff with the properties "padding" or "top" but when its working, the start of the website doesn't look like I want it to.