Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Style New Pages

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

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

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

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!