.contenedor{
max-width: 1500px;
width: 80%;
margin: auto;
}
.menu{
display: flex;
justify-content: space-between;
margin-top: 5px;
}
ul{
display: flex;
}
li{
list-style: none;
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="Assets/css/index.css">
<title>Viajes Chile</title>
</head>
<body>
<div class="contenedor">
<header>
<div class="menu">
<p>Viajes Chile</p>
<nav>
<ul>
<li>Inicio</li>
<li>Quienes somos</li>
<li>Destacados</li>
<li>Contacto</li>
</ul>
</nav>
</div>
<div id="carouselExampleControls" class="carousel slide " data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="Assets/img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="Assets/img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="Assets/img/carousel3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</header>
<section>
</section>
<section>
</section>
<section>
</section>
<footer>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Utilizando este codigo necesito que el carrusel de bootstrap se posicione con 0 margen superior , intenté colocar margin 0 , pero no funcionó . Debe ocurrir de tal forma que cubra el menu de navegación, el que tiene que tener letras de color blanco. También los controles del carrusel deben ser de color blanco . Además al cargar la página no aparece de inmediato el carrusel , una imagen de este , sino que aparece una imagen superior en la esquina izquierda pequeña . Aun cuando en el codigo del carrusel se encuentra la instrucción de que debe una de las imagenes estar activa, me imagino que esto es para señalar que al cargar la página aparezca de inmediato esa imagen.