kristofferstaugaard
New Coder
I have a problem where my navbar which is fixed to the right side of the screen, does not respect the 1440px max width of the body.
So my question is: How can i make sure the navbar never extends past the 1440px max width of the body?
So my question is: How can i make sure the navbar never extends past the 1440px max width of the body?
HTML:
<body>
<nav>
<div class="nav-upper">
<img class="nav-logo" src="img/logo.svg" alt="Staugaard Studio logo">
<div class="nav-collapse-btn">
<h2>Navigation</h2>
<img class="nav-arrow" src="img/arrow-down.svg" alt="nav indicator">
</div>
<div class="nav-collapse">
<a class="nav-collapse-link" href="">Om mig</a>
<a class="nav-collapse-link" href="">Projekter</a>
<a class="nav-collapse-link" href="">Kontakt</a>
</div>
</div>
<div class="nav-lower">
<h2>©2022</h2>
<a class="nav-btn" href="">KONTAKT</a>
</div>
</nav>
</body>
CSS:
nav {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
position: fixed;
top: 0;
right: 0;
padding: 40px 20px 40px 20px;
border-left: #242325 solid 2px;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1440px;
padding: 40px;
margin: 0 auto;
background-color: #FFF8F2;
}