I tried fixing the top:0 , but that didn’t seem to fixed the issue. I also did justify-content:end-right, but the issue still persist.
I have a few questions here…
what is this in the HTML?
<div class="btn">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Same would go for this in the CSS:
.bar1,.bar2,.bar3{
width:25px;
height:5px;
background:#8fcbdf;
margin:5px;
}
There are a few other containers I was trying to figure out, but i’ll focus on the one with the links:
.nav-links{
list-style-type: none;
display:flex;
justify-content: space-between;
position:fixed;
text-align: right;
}
This is “inside” of nav-container so you don’t need position: fixed because nav-container is already set to fixed.
You also don’t need the text-align: right
You are getting close and have made good work so far, but there is some extra code in the HTML & CSS that might be hurting you get to the solution.
Give your containers some background-color to help visualize what is going on.
Keep practicing with containers. after a while it will “click” and it will feel great to understand what’s going on. In the attached image you can see what is happening with the red/blue/yellow in your header. Notice how the yellow has broken outside the blue, which is not really good unless intended. That is the same reason you have a scroll bar to shift left/right. Something broke out of its container.
2 Likes