We're going to make a few final little changes. We're also going to refactor the styles and place them in a file just so the code is nice and organized.

The last element that we need to style is just the hours right here. As you can see, we have a slightly different set of styles that we need to implement. Let's switch over to the code and go up and see if we have our hours.

As you can see from our comments, this is already a little bit easier to find. Right here we have contact-hours-wrapper and then we actually have the hours themselves. We have the correct font but now let's go and let's change the size and the color.

I'll say color and we want to use that same dark gray, so it's at #858585. Then I want to use a font size that is 0.8 so about 0.8em.

styles.css

.navigation-wrapper > .left-column > .contact-hours-wrapper > .hours {
    font-family: "Ubuntu Condensed", sans-serif;
    color: #858585;
    font-size: 0.8em;
}

Hit save, hit refresh. Oh, it looks like we did not select it right, so let's see what's going on.

Let's go into the index.html, and go up here. You can see we have hours inside of contact-hours-wrapper. Theoretically, that should work. I have navigation-wrapper to contact-hours-wrapper, and then to the hours class.

We have the color correct and then we have the font-size. Whenever we have an issue like that then the next thing I do is I'm going to come here and look and see what could be causing that by inspecting the element.

Here you can see we have the hours and there are no styles here for that class. That is the reason why that's happening, so that could either be an issue related to the selector or something else. I think I already have it figured out.

You see where we have a .navigation-wrapper > .left-column > .contact-hours-wrapper? That's the issue. We need to add a left-column selector to .navigation-wrapper > .left-column > .contact-hours-wrapper > .hours. Hit save and now hit refresh. There we go, now that's working.

Now part of the reason why I like to leave these kinds of bugs inside of the tutorials is because if you run into those issues, and I promise you that you will. I've been doing this for a long time, I still run into those issues as I'm building websites out.

When you do, I want you to, not just being able to follow along, because when you're doing this on your own projects, you're going to have to figure it out and debug this yourself.

I want to walk you through the exact process that I go through whenever something doesn't work. The very first rule is: do not panic. I know if you're new to development that's kind of the first kind of default reaction.

Don't panic, just know that there is a process for being able to work through and then figure out exactly why something is not working. Now we have all of that set up properly. Let's go back to the code here and make sure we don't have any other issues. I think this all looks good.

Right now we just have this single style sheet, and we're going to start adding a lot more styles as we go through the rest of all of the styles we're going to build out. So what I'd like to do is break out our navigation styles into their own file.

I'm going to close this off and let's actually create a new directory here called styles. Then inside of this styles directory, I'm going to move our styles.css file. If you get this little pop up here that says, "Are you sure you want to move it?", just say "yes."

Then I'm going to rename this one. I'm going to call it common.css, and what that means is that any of the styles that go in this file and going to be styles that every page in the entire application needs.

Then I'm going to create a new file here called nav.css. Inside of this file, this is where I'm going to grab all of those values and then paste those in.

These are going to be the nav styles, and then we have our common ones, which now just has that body tag or that body tag selector in those styles.

Now everything on the site's going to break because we've changed the path and we've also renamed the files. Let's go and let's fix that. Right here for our style.css sheet, this is no longer going to be a reference to a styles file.

Now we're going to say styles/common.css and then we want to have styles/nav.css.

Assuming I don't have any typos, then everything should be working. Nope. Looks like I did have a typo so let's scroll up and let's see the issue.

There's actually a couple of spots where you can do this. First, you can go and look for this reference. You can see we have styles, we have common.css, and then nav. You can also see where it has these little errors.

If you click on that, it'll say there was an error trying to access these files, so it tried to go and do styles/common and it couldn't find it. Let's go and let's see the issue. The issue is because it put when I clicked on new directory, it actually put it inside of the images directory.

Let's move that entire folder. Now you can see it's lined up perfectly. That should be the issue. Now if I hit refresh, there you go, we're back to working, and everything is looking really good.

Now the really nice thing about our file structure is if you ever need to make a change to the navbar styles, you'll know exactly where to go do that. Then once you get into the nav.css file, you can see where the common nav styles are, where the left-column is, where the center, and then where the right is.

The better organized you can keep your code, the more enjoyable working on the projects are going to be. I can promise you, if you come back to a project that you haven't worked on for even just a few weeks or a few months, then it's going to take you a while to become acclimated with where you put all of the files, especially for a larger project.

The better you can get at naming your directories and your files properly, the easier it's going to be whenever you need to go and make changes. Also, when you're working on a team, so if you're working to build a project out with more developers than just yourself, they are really going to appreciate when you wrap up your code and you organize it properly.

We now have completed the navbar and you've learned all kinds of things along the way. You've learned about animation, you've learned about Flex Box, CSS grid, images and how to implement all kinds of styles.

In the next guide, we are going to start moving down the line and we're going to see how to build out this really cool little parallax feature. I will see you in that guide.