Estoy practicando lo que voy aprendiendo en clases y estoy inventando esta pagina, y quiero tener un nav que redirija dentro del html a las diferentes secciones correspondientes, que eso ya lo hace bien, pero cuando lo uso, se redirije y no aparece como alineado de manera vertical, a lo que me refiero es que en vez de redirijirlo y que se muestre desde el principio, lo redirije y se muestra como ya un poco comenzada esa seccion, aca dejo fotos y el codigo para que se entienda bien porque no se ni como explicarlo bien del todo. Agradezco la ayuda! :)
HTML
<body>
<header>
<h1>Ciro</h1>
<a href="https://us02web.zoom.us/postattendee?mn=-YKFmj40OEQTJWHDPPsCAGRkYtOkwI9eFWGu.Oc-fO8jc4swAiH6a" style="text-decoration: none;"><h5>Spanish</h5></a>
</header>
<nav>
<div><a href="#locationInfo">Location</a></div>
<div><a href="#apartmentPictures">Pictures</a></div>
<div><a href="#equipment">House Equipment</a></div>
<div><a href="#expectations">Expectations Host-Guest</a></div>
<div><a href="#contact">Contact</a></div>
</nav>
<section id="locationInfo">
<div class="neighborhood">
<p>We are in Palermo!</p>
<p>and why that is something so good? because Palermo is currently one of the most popular neighborhood choosen by young people, here you will find museums, parks, bars, clubs, fanstastic gastronomy and a lot of musica and why not, maybe some street show of tango. You will not regret of living in Palermo.</p>
</div>
<div class="mapPic">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52563.88535420398!2d-58.464446345495055!3d-34.57272161691775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcb59c771eb933%3A0x6b3113b596d78c69!2sPalermo%2C%20CABA!5e0!3m2!1ses!2sar!4v1682101665170!5m2!1ses!2sar" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"><img src="img/mapa.jpg"></iframe>
</div>
</section>
<section id="apartmentPictures">
<ul class="carruselPic">
<li><img src="img/house pic (1).jpeg"><p>Bathtub + Shower</p></li>
<li><img src="img/house pic (2).jpeg"><p>Toilet + Videt</p></li>
<li><img src="img/house pic (3).jpeg"><p>Patio with outsider furniture</p></li>
<li><img src="img/house pic (4).jpeg"><p>Patio with private grill</p></li>
<li><img src="img/house pic (5).jpeg"><p>Living room with open kitchen and a bar</p></li>
<li><img src="img/house pic (6).jpeg"><p>Big cabinets for storage in the kitchen</p></li>
<li><img src="img/house pic (7).jpeg"><p>Living - Kitchen</p></li>
<li><img src="img/house pic (8).jpeg"><p>Living with the entrance</p></li>
<li><img src="img/house pic (9).jpeg"><p>View of the kitchen from the living room</p></li>
<li><img src="img/house pic (10).jpeg"><p>Big tv in livingroom</p></li>
<li><img src="img/house pic (10).jpeg"><p>living room</p></li>
<li><img src="img/house pic (12).jpeg"><p>Main bedroom, with view to the skyline of Palermo</p></li>
<li><img src="img/house pic (13).jpeg"><p>View of the patio from the office that counts with a closet</p></li>
<li><img src="img/house pic (14).jpeg"><p>Office</p></li>
<li><img src="img/Planos dibujo de departamento .png"><p>Graphic of the distribution of the house with mesurements</p></li>
</ul>
</section>
<section id="equipment">
<div class="textEquipment">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae, quae illo consequuntur odio sequi perferendis? Tempora libero quam dignissimos ducimus iste, blanditiis quis quo assumenda, eveniet asperiores, ex aperiam id.</p>
</div>
<div class="equipmentPic">
<img src="img/storage (1).webp">
</div>
<div class="textEquipment">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur vel nostrum laudantium doloribus ipsum beatae minus dolore nemo, minima distinctio temporibus, hic eligendi modi cum voluptatibus possimus laborum impedit sequi.</p>
</div>
<div class="equipmentPic">
<img src="img/storage (2).webp">
</div>
<div class="textEquipment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam in, vero, officiis quasi voluptates cupiditate laudantium, aliquid et ducimus aperiam illo enim voluptatum ab nesciunt pariatur eius temporibus ad placeat?</p>
</div>
</section>
<section id="expectations">
<div>
<ul>
<p>Expectations as a guest <i class="fa-solid fa-key" style="color: #e4c5ac;"></i></p>
<li>no</li>
<li>rompas</li>
<li>nada</li>
<li>por</li>
<li>gracias</li>
<li>favor</li>
<li>favor</li>
<li>favor</li>
</ul>
<ul>
<p>Expectations as a host <i class="fa-solid fa-house" style="color: #e4c5ac;"></i></p>
<li>no</li>
<li>rompas</li>
<li>nada</li>
<li>por</li>
<li>gracias</li>
<li>favor</li>
<li>favor</li>
<li>favor</li>
</ul>
</div>
</section>
<footer id="contact">
<p>If you like what you see, please feel free to contact for more info and check the ability dates</p>
<div class="contactInfo">
<div><i class="fa-brands fa-instagram fa-3x" style="color: #345d4f;"></i></div>
<div><i class="fa-solid fa-at fa-3x" style="color: #345d4f;"></i></div>
<div><i class="fa-brands fa-whatsapp fa-3x" style="color: #345d4f;"></i></div>
</div>
<p style="font-size: 13px;">© 2023. María Sol González. Todos los derechos reservados.</p>
</footer>
</body>
CSS
header h1{
text-align: center;
font-size: 8rem;
}
header h5{
display: flex;
justify-content: end;
padding-right: 1rem;
width: 5rem;
margin-left: 37rem;
}
header h5 :hover{
color: #664527;
}
nav{
background-color: rgb(247, 247, 247);
height: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
padding-top: 1rem;
position: sticky;
z-index: 1;
top:0;
}
#locationInfo{
background-color: #F3E3D3;
height: 22rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.neighborhood :first-child{
font-size: 40px;
width: 20rem;
margin-left: 18rem;
margin-top: 5rem;
}
.neighborhood :last-child{
width: 35rem;
line-height: 25px;
margin-left: 10rem;
margin-top: 3rem;
}
.mapPic{
width: 26rem;
margin-right: 3rem;
margin-top: 5vh;
}
.mapPic img{
width: 100%;
height: 100%;
}
#apartmentPictures{
height: 30rem;
display: flex;
justify-content: center;
}
#apartmentPictures ul{
background-color: #664527;
height: 33rem;
scroll-snap-type: x mandatory;
list-style: none;
}
#apartmentPictures ::-webkit-scrollbar {
display: none;
}
.carruselPic{
display: flex;
gap: 35px;
overflow: auto;
}
.carruselPic img{
background-color: rgb(255, 255, 255);
width: 23rem;
height: 26.9rem;
margin-top: 2rem;
margin-left: 1.3rem;
object-fit: contain;
scroll-snap-align: center;
border-radius: 5%;
}
#apartmentPictures ul :last-child {
margin-right: 1.3rem;
}
#apartmentPictures p{
color: white;
width: 23rem;
margin-left: 1.3rem;
text-align: center;
}
#equipment{
background-color: #BCCCC2;
margin-top: 3.02rem;
height: 27rem;
display: flex;
flex-direction: row;
}
.equipmentPic{
background-color: pink;
width: 15rem;
height: 20rem;
border-radius: 90px 90px 0px 0px;
border-style: solid;
border-color: #8c1842;
border-width: 4px;
margin-top: 4rem;
margin-left: 1rem;
}
.equipmentPic img{
width: 100%;
height: 100%;
border-radius: 90px 90px 0px 0px;
object-fit:fill;
}
.textEquipment p{
background-color: rgb(247, 247, 247);
width: 13.8rem;
margin-top: 15rem;
margin-left: 1.1rem;
}
#expectations{
background-color: #345D4F;
width: 100%;
height: 25rem;
color: rgb(228, 197, 172);
}
#expectations div{
width: 95%;
height: 100%;
margin-left: 2rem;
display: flex;
flex-direction: row;
gap: 5rem;
}
#expectations ul{
border-style:double;
border-color:goldenrod;
list-style: none;
width: 95%;
height: 22.8rem;
margin-top: 1rem;
}
#expectations p{
text-align: center;
font-size: 30px;
margin-top: 2rem;
}
#expectations li{
width: 60%;
margin-top: 1rem;
margin-left: 7rem;
}
footer{
background-color: #F3E3D3;
height: 10rem;
}
footer p{
color: #664527;
text-align: center;
padding-top: 1.5rem;
font-size: 20px;
}
.contactInfo{
height: 4rem;
margin-top: 1.5rem;
display: flex;
flex-direction: row;
justify-content: space-around;
}
asi es como me gustaria que cuando le den click al a href, se muestre, de manera vertical arranca donde justamente arranca esa seccion
Pero asi es como me esta funcionando ahora el a href, me lo redirije bien, pero no me lo muestra donde justamente arranca la seccion sino que ya esta como por debajo