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!

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


Header Issue

I've started a new website for the 'How to make a website' project. So I copied and pasted my first code, but after I made the changes I wanted. My header no longer extends the full width of the page. I'm not sure what I did wrong.

9 Answers

Cui Gunter
Cui Gunter
12,518 Points

Can you post your code on the forum? Still learn and its hard to tell without seeing the code first.

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

body { font-family: 'Lora', serif; font-weight: 400; }

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

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Lora', serif; margin: 15px 0; padding: 20px; font-size: 2.75em; font-weight: bold; line-height: 1em; }

h2 { font-size: 1em; 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-weight: 400; font-size: 2em; padding: 15px 10px; }

/**************** Footer ****************/

footer { font-size: 1em; text-align: center; clear: both; padding-top: 50px; color: #2097f5; }

.socialIcon { width: 20px; height: 20px; margin: 0 5px; }

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

gallery {

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

/* pictures */

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: darkslategrey; }

gallery li a p {

margin:0; padding: 5%; font-size: 1em; color: darkslategrey; }

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

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

p { line-height: 1.5em; }

/**************** PAGE: CONTACT ****************/

.contact-info { list-style: none; }

/**************** COLORS ****************/

/* site body */ body { background-color: darkslategrey; }

/* orange header */ header { background: yellowgreen; border-color: yellowgreen; }

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

/* nav background on mobile */ nav { background: forestgreen; }

/* visited color */ nav a, nav a:visited { color: whitesmoke; }

/* nav hover color */ nav a.selected, nav a:hover { color: yellowgreen; }

/* a color */ a { color: #fff; }

Do you need to see my html as well? I thought I might have messed up my css code. But could it be a problem with the html?

Cui Gunter
Cui Gunter
12,518 Points

Yes, that would be helpful for me.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website Story</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>The Story Of A Website</h1> <h2>By Bret Worthy</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/pic1.png"> <img src="img/pic1.png" alt="picture1"> </a> <p>The Basic of the Basic</p> </li> <li> <a href="img/pic2.jpg"> <img src="img/pic2.jpg" alt="picture2">
</a> <p>Here Comes the CSS</p> </li> <li> <a href="img/pic3.jpg"> <img src="img/pic3.jpg" alt="picture3"> </a> <p>Let's Add Some Photos</p> </li> <li> <a href="img/pic4.jpg"> <img src="img/pic4.jpg" alt="picture4"> </a> <p>Are These More Pages?</p> </li> <li> <a href="img/pic5.jpg"> <img src="img/pic5.jpg" alt="picture5"> </a> <p>Mobile Ready</p> </li> <li> <p>Ta-Da!</p> </li> </ul> </section> <footer> <a href="http://facebook.com/profile.php?id=100004307087136"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="socialIcon"></a> <p>© 2016 Bret Worthy.</p> </footer> </div> </body> </html>

Thank you for your help.

Cui Gunter
Cui Gunter
12,518 Points

Hi Bret, I try your code on my PC and the header does extend to the full width of the page on my PC. I don't think the issue is in the <link rel="stylesheet" href="css/main.css"> style sheet. Because the responsive.css style sheet comes after the main.css, the issue might lie within the responsive.css sheet. There might be something in there that override the style in the main.css. One way I use to troubleshoot is to comment out certain sections until I find the one that's the cause of the problem. Hope this help. If you need additional help, I can look can the responsive.css.

So it extends the full width on your pc? Hmm. Thank you for your help, I'm wondering if it has anything to do with my pc? I'll try to troubleshoot like you suggested, and if I can't get it to work, then I may bug you again. lol

Cui Gunter
Cui Gunter
12,518 Points

Anytime. Could also be the browser. I'm using google chrome.