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

Danilio Moreno
Danilio Moreno
929 Points
Posted by Danilio Moreno
Danilio Moreno
929 Points

Cannot get rid of Dark green background on About page that is the background for Portfolio About and Contact page.

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

  /**********************
  TWO COLUMN LAYOUT
  **********************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

  /**********************
   PAGE: PORTFOLIO
  **********************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

   /***********************
   PAGE ABOUT
   ***********************/

   .profile-photo {
     float: left;
    margin: 0 5% 80px 0;
   }

}

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

3 Answers

Steve Hunter
Steve Hunter
57,712 Points

In your header you have a line of css that shouldn't be there.

Your About page has:

<body>
    <header>
      <a href="index.html" id="logo"><link rel="stylesheet" href="css/main.css">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>

Take that stylesheet reference out and see if that improves things?

Steve.

Steve Hunter
Steve Hunter
57,712 Points

That is in about.html - it is in the header of that file and not in the others.

Steve.

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points

That fixed everything!!!! I have no clue how that code got there! Thank you so much!!

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

Hi Danilio,

The only colour in that css code is for the header element - if your background on the whole page is green, then there's some additional code at work here.

However, the header background should be the same across all pages - what do your pages look like? Can you share the Workspace link when you've launched the server?

Cheers,

Steve.

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points

http://port-80-r053k3hzbj.treehouse-app.com/about.html

There are several things wrong with that page, the spacing between the picture, the size of the Text in the header and the dark green background. The other pages are fine. I do not understand what i've done wrong.

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

That code has now gone and the site works fine. :-)

Steve.