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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

daniela
daniela
2,629 Points

navigation 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

Hi 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
daniela
2,629 Points

Yes, 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;
}

Great job using the validator and figuring that out!

daniela
daniela
2,629 Points

Thanks for your help Jason!

You're welcome!