Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
daniela
2,629 Pointsnavigation is not centered vertically in desktop view
My question is in reference to the video "Adjust the Profile Page and Header." Around 5min:30sec in the video, when the page is refreshed, the navigation shifts down and looks centered vertically. When I followed along and refreshed my page (in Firefox and Chrome), my code didn't produce the same result. My navigation was closer to the top of the page. I added a top margin of 20px and it seems to do what the video looks like, but I am wondering if I missed something in the video or if there was a different way to center it vertically so that it is more accurate. Thanks!
Below is the CSS for reference:
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
margin-top: 20px; /* This is the part that I added to make it look centered vertically */
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Daniela,
I do not see the navigation shift down during the refresh. I see the logo section increase in size and he also applied a margin bottom to the h2 right before that refresh and so you see that pushing the bottom of the header down. Try focusing your eyes on the navigation during the refresh.
Pause the video at 5:29 right before the refresh. Does the space above your nav look about the same as the video? There's a little bit of space below the nav and a lot above it. If it doesn't , then you're probably missing some css from an earlier part.
I downloaded the project files to see the css.
See if you have this styling around line 65 of "main.css":
nav {
margin: 20px 0 0;
padding: 10px 0;
text-align: center;
}
It turns out that you were right on the mark with your 20px.
So I'm not sure if you lost that css at some point but that is where the nav is getting it's extra space at the top.
daniela
2,629 PointsYes, I found my error down the line using the [CSS Validator](jigsaw.w3.org/css-validator). Apparently in my main.css I accidentally put double :: instead of single : after margin. When I noticed the problem in my responsive.css I was eyeballing the 20px, but it happened to be spot on, unlike my main.css. :)
So I had this error in my main.css code:
nav {
text-align: center;
padding: 10px 0;
margin:: 20px 0 0;
}
Jason Anello
Courses Plus Student 94,610 PointsGreat job using the validator and figuring that out!
daniela
2,629 PointsThanks for your help Jason!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome!