„Leerzeichen“ wurde hinter einer klebrigen Navigationsleiste erstellt und ich finde keine Möglichkeit, es zu entfernen ⇐ CSS

[Guest]

Ich erstelle eine Portfolio-Website für mich selbst und habe unter anderem eine Sticky-Navigationsleiste hinzugefügt, aber das Problem ist, dass beim Hinzufügen ein „Raum“ dahinter entstanden ist und mit diesem „Raum“ Nach der Erstellung kann ich das Karussell, das ich habe, nicht als Hintergrund verwenden. Die Navigationsleiste funktioniert wie sie sollte, aber wenn ich die Seite nach unten gehe, bleibt der „Leerraum“ einfach dort und ich kann keine Problemumgehung dafür finden. Ich habe einige Beiträge über Leute gesehen, die ein ähnliches Problem wie ich hatten. Ich habe die vorgeschlagenen Lösungen ausprobiert, aber keine davon scheint zu funktionieren. Ich verwende HTML und CSS mit etwas Bootstrap, da ich ziemlich neu im Programmieren bin. Ich würde es begrüßen, wenn eine der bereitgestellten Lösungen kein Javascript verwenden würde. Der Raum hinter der Navigationsleiste, den ich entfernen möchte (die rötliche Farbe)
Ich habe versucht, die Position der Navigationsleiste festzulegen top:0, Ändern des Karussells in Position:absolute, Ändern der Breite, der Clear- und Float-Eigenschaften der Navigationsleiste, aber nichts scheint wie oben erwähnt zu funktionieren.
Index.html:

Code: Select all

Flokki's Portfolio
[*]








[url=#]
[i]
FlokkiFur [/url]

[/i]


[list]

[url=#top]HOME[/url]

[*]
[url=#cartoes]PORTFOLIO[/url]

[*]
[url=#]ABOUT ME[/url]

[*]
[url=#]CONTACT[/url]

[/list]
[list]
[*][url=...][i][/i][/url]
[*][url=...][i][/i][/url]
[*][url=...][i][/i][/url]
[/list]







[img]...[/img]

[img]...[/img]

[img]...[/img]

Styles.css:

Code: Select all

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
background-color: #8b5656;
}

.navbar {
--margin: 40px;
background-color: rgba(255, 255, 255, 0.5);
position: sticky;
top: 0;
width: calc(100vw - 2 * var(--margin));
z-index: 1000;
border-radius: 80px;
margin-left: var(--margin);
margin-right: var(--margin);
padding: 12px 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carouselslide{
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
top: 0;
}

.carouselslide img {
filter: blur(8px);
filter:brightness(0.3);
}