I have inserted a code snippet that highlights my issue. I am attempting to ensure that the .navigation element remains fixed at the top of the colored divs, however, when using 'right: 0;', the .navigation element seems to shift to the right side of the body instead of staying within its container. What could be causing this unexpected behavior?
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
color: rgba(0, 0, 0, 0.75);
}
body {
background-color: #f1f1f1;
font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
line-height: 1.8rem;
}
.wrapper {
width: 70%;
margin: 0 auto;
}
.container {
position: relative;
}
.navigation {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
right: 0;
}
.navigation div {
padding: 20px;
font-weight: 600;
font-size: 1.3em;
}
section {
height: 100vh;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}<main class='container wrapper'>
<nav class='navigation'>
<div>
About
</div>
<div>
Projects
</div>
<div>
Contact
</div>
</nav>
<section class='about one'>
</section>
<section class='projects two'>
<div class="">
<a href="#">Test1</a>
</div>
<div class="">
<a href="#">Test2</a>
</div>
<div class="">
<a href="#">Test3</a>
</div>
</section>
<section class='contact three'>
</section>
</main>