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

Posted by Stephen Pender
Stephen Pender
355 Points

Header Not Looking As It Should

I am currently watching the video "Build Navigation With Unordered List" and I just added the following code:

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

Now for some reason the header is only about an inch wide and this obviously should not have happened. This may be because i made the mistake of trying to add a little bit of my own coding the other day (oops!) Would really appreciate it if anyone has any ideas of what I have done wrong :)

Here is my HTML and CSS coding (sorry about how the HTML is laid out. It won't post on separate lines)

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One|Pacifico' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1></h1> <h2></h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with colour and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> </div> <footer> <a href=""><img src="img/twitter-square-logo.png" alt="Twiter Logo"></a> <a href=""><img src="img/facebook-square-logo.png" alt="Facebook Logo"></a> <p>Ā© </p> </footer> </body> </html>

CSS:

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

body { font-family: 'Poiret One', sans-serif; font-size: 20px; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

/******************************************* 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: 'Pacifico', sans-serif; margin: 15px 0; font-size: 1.5em; font-weight: normal; line-height:0.8em; }

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

/******************************************* NAVIGATION ********************************************/

nav { text-align:center; padding: 2px 40px 2px 0px; }

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

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; background: #000; padding-bottom: 15px;
}

/******************************************* PORTFOLIO ********************************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float:left; width: 45%; margin: 2.5%; background-color: #c2c2bf; color: #d6d6d6; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #6e6e6e; }

/******************************************* COLOURS ********************************************/

/* site body */ body { background-color: #fff; color: #d3d3d3;

}

/* yellow header */ header { background: #f0ff00; padding-top: 15px; }

/* nav background on mobile */ nav { background: #000000;

}

/* logo text */ h1, h2 { color: #000; }

/* yellow links */ a { color: #000; }

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

/* Selected nav link */ nav a.selected { color: #d3d3d3; }

/* nav hover */ nav a:hover { color: #f0ff00; }

1 Answer

Vince Leung
Vince Leung
4,730 Points

Hi Stephen,

You might want to take a look at "how to post questions next time" so helps us break down your question a little bit easier :). But that's okay this time, i pasted your code to codepen (http://codepen.io/leungvi8/pen/MeWxQR), to help look at your code visually, but the simple answer is that you might have accidentally altered the width of your header to 100px. But specifying that, you are telling your code to force your header to 100px instead of something like 100% which spans the whole width of your browser. Hope that answers your question! Good luck!