Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now to position the nav bar, let's come back to our CSS file. Let's come back to screen layout large. Let's scroll down. And after our promo_container content, let's hit a few returns. Let's type nav, beginning and ending bracket. Let's come down here and set a top property of 275 pixels. Now, the height of our heading is 275 pixels, so if the top of the nav is set to 275, that will be right after the ending heading area.
Next rule nav a. We're going to target the anchor links inside of the nav element. We're going to come in here and set a margin. We're going to set 12 pixels on the top, 0 on the right, 10 on the bottom, and 20 pixels on the left. This will space out the navigation area so that we have a little bit of space around the anchor tags, and it also makes sure that the anchor tags space from each other 20 pixels on the left-hand side here. Let's choose File > Save. Let's come back out to our browser.
Let's hit Reload. So now we can see the top position of this item is now at 275 pixels, which again is right under where the heading area stops. We have our margin on these individual items, which pushes the navigation element a little bit taller to encompass that margin, and then each one of these links is spaced out as well. Now that our navigation properties are set, we're going to focus on the float problem we're having down here. Since each one of the individual promos are set to float, the outer page container is not extending down to encompass all of the content inside of each one of the individual promos, and so that's where we're going to focus our attention on next.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 49960 Viewers
117 Video lessons · 37262 Viewers
113 Video lessons · 81187 Viewers
65 Video lessons · 10575 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.