.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>Using this code I need the bootstrap carousel to be positioned with 0 margin top , I tried to set margin 0 , but it didn't work. It must happen in such a way that it covers the navigation menu, which has to have white letters. Also the carousel controls should be white. In addition, when loading the page, the carousel does not appear immediately, an image of it, but a superior image appears in the small left corner. Even though the code of the carousel contains the instruction that one of the images must be active, I imagine that this is to indicate that when the page loads, that image appears immediately.
If you're using Bootstrap, better use a navbar then. So the code would look like this: The HTML:
and the CSS you should take into account this:
To place a logo on the left and the rest of the buttons on the right, in bootstrap, the following code can be used