Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Nav won't center in vertical align...

My code matches the video identically, but my nav won't vertically align in the center when the #logo is set to width 45%. It will when I change the logo width to 40% , margin of 5%, with a nav width of 45%, margin of 5%... I'm so confused. The values don't add up...

3 Answers

Jacob Miller
Jacob Miller
12,466 Points

Are you setting the margin like this: margin: 5%, or are you setting margin-left and margin-right for the #logo and nav respectively?

You code inside the media query should look like this:

nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

When my code matches yours (above) the nav appears vertically aligned at the bottom of the header. Only when I change the width of one of the two elements will the nav and #logo align... I have checked a million times, this is too weird.

Jacob Miller
Jacob Miller
12,466 Points

Hmm. Can you post your CSS?