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

Brad Lacke
Brad Lacke
7,438 Points
Posted by Brad Lacke
Brad Lacke
7,438 Points

Navigation jumps to top of screen when re-aligned for screen query

I'm following along with the video and while Nick's nav elements stay at the bottom of the header (or at the end, end up in the middle, which he doesn't seem to have a problem with), my nav jumps to the top right of the page as soon as the nav and #logo are floated left and right for the ≥660px media query

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Here's my site:

http://web-shhlnkgz47.treehouse-app.com/contact.html

Here's the relevant code (I'm hoping, I can post everything):

@media screen and (min-width: 660px)  {

   /********************
  HEADER
  *********************/

  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%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #333;
    margin-bottom: 60px;
  }

}

2 Answers

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

Bah! Figured it out once I got to the testing part, the problem was in my main.css. Sorry guys/gals.

Garrett Evans
Garrett Evans
767 Points
Garrett Evans
Garrett Evans
767 Points

Can you show me what fixed it because I am having the same trouble and have had no luck fixing it.

Brad Lacke
Brad Lacke
7,438 Points
Brad Lacke
Brad Lacke
7,438 Points

I had left out a semi-colon and a whole set of rules was being ignored. Maybe double check your code and see if you just made a little syntax mistake like that.