Navigation tool not moving to the left

HTML/CSS
1

Hello,

I am working on the exercise for making the navigation bar. I had 2 questions.

  1. What is the use of ‘nav’ instead of ‘div’ for making the first (big) container. Are there specifiv benefits to do the prior that I am missing?

  2. My navigation bar on mobile is working perfectly. But on laptop, the buttons are spead evenly on the width of the view port. But I just can’t seem to get the buttons moved to the side - as the “justify content flex end” process should do. I have tried everything I could concieve. If you have any thoughts what I might be missing please let me know.

Thanks and big cheers!
Anique.

2

div is a generic container while nav is a semantic container telling search engines, screen readers etc. that the content of the container is used for navigation.

Regarding your layout problem: I’d start with comparing my code with Mosh’s. If you need help you should share your code and maybe provide a screenshot of the result.

3

Hi Sam,

Thanks for volunteering to help. Thanks for the clarification on the nav container.
I see what you mean.

Regarding the question on the nav bar. I tried to compare the codes. Even changed some of the other stuff to get it as close to Mosh’s as I could. Its still not going well. I’ll share the code here. Let me know if you can spot anything.

4

@media screen and (min-width: 768px) {

.navcontainer {

/* width: 50vh; */

/* padding-left: 50vh; */

height: 2.5rem;

}

.navbar {

flex-direction: row;

justify-content: flex-end;

/* align-items: ; */

}

.navitem {

width: 8rem;

margin: 0;

padding: 0.55rem;

}

}

1
1930×2100 181 KB