Navigation bar exercise

HTML/CSS
1

I was wondering, in the exercise Mosh uses multiple times the “nav” in his CSS, I was wondering why that is? Because whenever I delete the that attribute in my CSS it doesn’t seem to change anything. My CSS was a little bit different, but still same result, it is on the bottom.

Mosh HTML:

<body>
    <nav>
      <ul>
        <li><a href="">About</a></li>
        <li><a href="">Courses</a></li>
        <li><a href="">Forum</a></li>
        <li><a href="">Learning Paths</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </body>

Mosh CSS:

html {
  font-size: 62.5%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
}

nav {
  background: #000;
  padding: .7rem
}

nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  text-align: center;
}

nav li {
  margin: .5rem 0;
}

nav a {
  color: #ccc;
  text-decoration: none;
}

nav a:hover {
  color: #fff;
}

My CSS

html {
  font-size: 62.5%;
}

body {
  margin: 10px;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
}

nav {
  background-color: black;
  padding: 0.7rem;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  align-items: center;
}

li {
  margin: 0.5rem 0;
}

a {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
}

a:hover {
  color: gray;
}
2

well when you put a nav think of it like a box (list) within a box (nav) so if you don’t define the size of your outer box it will only fit perfectly around the inner box and when you remove the outer box it looks as if nothing changed. instead use the outer box to frame where you want to put everything within. if you want it long, make the nav long and put the list inside it, if you want it high use the nav to do that.

3

Thanks @theorion ! But what do you mean by the last sentence?

4

Well if you have a list to make a menu you can tell the list where to be, but if you want to put anything near or in between the menu it’s easier to do that if you put the list in a nav. For now all you need to know is how to move things and space them out, if you did it differently than mosh no problem. later you will learn to fit more elements and reuse them and learn to do it efficiently but just take it one step at a time and know elements are like boxes and blocks you can stack and store inside each-other