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

Posted by Raechel Keene
Raechel Keene
4,416 Points

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
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%;
  }
Raechel Keene
Raechel Keene
4,416 Points
Raechel Keene
Raechel Keene
4,416 Points

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
Jacob Miller
Jacob Miller
12,466 Points

Hmm. Can you post your CSS?