Как наложить Navbar на изображение героя без пробега наверху? ⇐ CSS

[Anonymous]

Проблема: я работаю на веб -сайте, где я хочу, чтобы Navbar был прозрачным и наложением непосредственно на изображение героя. Однако, когда я удаляю цвет фона Navbar, я вижу белое пространство в верхней части изображения вместо навигации. Navbar к позиции: абсолютно; или позиция: исправлено;, но белое пространство все еще появляется.
удалил весь край и прокладки из тела и HTML, но без изменений.
Пробое поля: -70px; В разделе моего героя, которая немного помогла, но это не похоже на правильное исправление.
Убедитесь, что у моего героя есть рост: 100vh; и размер фонового размера: Cover;.
ожидаемое поведение:
Я хочу, чтобы Navbar был прозрачным, расположенным над изображением героя, не оставляя пробелов между ними. < /p>
Фактическое поведение:
Вместо навигации на нависании на изображение героя между ними появляется белое пространство. Br />import React from "react";
import { Link, useNavigate } from "react-router-dom";

const Header = () => {
const navigate = useNavigate();

const handleLogoClick = () => {
navigate("/");
};

return (


[*]

• About
• Collection

);
};

export default Header;
< /code>
home.js:
import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
return (




Coussind'amour
Apportez confort et charme à votre intérieur avec nos coussins uniques.

Découvrir



);
};

export default Home;
< /code>
css: < /p>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
font-family: "Wix Madefor Display", serif;
overflow-y: auto;
}

.nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
background-color: transparent; /* Transparent background */
padding: 1rem 2rem;
z-index: 10;
}

.hero-section {
margin: 0;
width: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
background-color: #000;
}

.hero-section img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... at-the-top