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 Adding Pages to a Website Style New Pages

Posted by Alvin Pollard
Alvin Pollard
1,934 Points

So... I think I broke it...

Hi everyone! Thanks in advance for any assistance you can offer.

I was following the build a basic website track and everything was going great until the "Style New Pages" section. I must have incorrectly labeled something or deleted something or looked at it the wrong way because my 1st and 2nd Headers have been crammed into the left side of the browser. I went back and compared the code that Nick wrote to my own and beside the personal choices (colors and some paragraph text), I am pretty sure it's the same. I double checked for any open statements or syntax errors but couldn't find any. I went as far as to run it through a css code checker to be sure.

That said, can anyone tell me what I'm missing? I'm sure it's something I did or missed but I just can't find it. If it's not too much more to ask... could you just point me in the direction of what is wrong so I can try to remedy it myself before I come back begging for the direct answer? :) Again, thanks in advance for the help and time!

/************************
GENERAL
*************************/

body {
 font-family: 'News Cycle', sans-serif; 
}

#wrapper{
  max-width:940px;
  margin: 0 auto;
  padding: 0 5%;
}

a{
  text-decoration: none;
}

img{
max-width: 100%;
}

h3{
margin: 0 0 1em 0;
}
/************************
HEADING
*************************/

header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100px;
  }

#logo {
  text-align: center;
  margin: 0;
}

h1{
  font-family: 'Bangers', sans-serif;
  margin: 15px 0;
  font-size: 4em;
  font-weight: normal;
  line-height: 0.8em;
}

h2{
font-size: 1.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/************************
NAVIGATION
*************************/
nav {
 text-align:center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
list-style: none;
  margin: 0 10px;
  padding: 0;
  }

nav li{
display: inline-block;
}

nav a {
font-size: 1.5em;
  font-weight: 700;
  padding: 15px 10px;
}


/************************
FOOTER
*************************/

footer {
  font-size: 0.75em;
  text-align:left;
  clear: both;
  padding-top: 5px;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
  }
/************************
PAGE PORTFOLIO
*************************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
float: left;
  width:45%;
  margin: 2.5%;
  background-color: #002117;
  color: #002117;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1.25em;
  color: #DFEFFC;
}

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

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}
/************************
COLOR
*************************/

/* site body */
body {
  background-color: #006B4B;
  color: #1B362E;
}

/* Green Header */
header {
  background: #063D68;
  border-color: #1B362E;
}

/* Nav background on mobile devices*/
nav {
  background: #1C2A34;
}

/* Logo Text */
h1, h2 {
  color: #fff;
}

/* Links */
a {
 color: #6ab47b; 
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav links */
nav a.selected, nav a:hover {
color: #32673f;
}  

    ```

3 Answers

Justin Wiswell
Justin Wiswell
9,471 Points
Justin Wiswell
Justin Wiswell
9,471 Points

It looks like the header width has been declared in PX instead of a percentage. Currently you have:

header {
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100px;
 }

Try:

header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Alvin Pollard
Alvin Pollard
1,934 Points
Alvin Pollard
Alvin Pollard
1,934 Points

You are awesome! It makes all the sense in the world as to why that's causing the problem. Thanks so much for your help! Now I can get back to learning! :D

Thanks again!

Justin Wiswell
Justin Wiswell
9,471 Points
Justin Wiswell
Justin Wiswell
9,471 Points

No problem! If you ever get stuck in a situation like this again, you can search for "Code Comparison" tools on google and pull up a side by side of old/correct code and compare it against code that you've changed.

Cheers!