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

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

Nav's float: right in @media screen and (min-width: 660px) is pushing nav right of logo. What is wrong?

Nav's float: right in @media screen and (min-width: 660px) is pushing nav right of logo. What is wrong?

With float: right commented out, I get nav text under the h1 & h2 and a little to the right. Inline image 3

The bottom of responsive.css file for print screen directly above is:

@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 #599a68;
    margin-bottom: 60px;
  }

*/
}  

Including float: right, I see the the nav text right of the first item in the #wrapper on the white background section. For the Contact and Index pages, Nav test is right of their h3 text. For Portfolio, the nav test is right of the 1st img. (note: that background: none was commented out for viewability on the white background) Inline image 2

The bottom of responsive.css file for print screen directly above is:

@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 #599a68;
    margin-bottom: 60px;
  }

*/
}

1 Answer

Steven Parker
Steven Parker
231,198 Points

This CSS seems incomplete and the HTML is not present at all.

If this is from a workspace, you can make a snapshot of it and post the link here.