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
Bret Worthy
3,964 PointsHeader 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
12,518 PointsCan you post your code on the forum? Still learn and its hard to tell without seeing the code first.
Bret Worthy
3,964 Points/**************** 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; }
Bret Worthy
3,964 PointsDo 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
12,518 PointsYes, that would be helpful for me.
Bret Worthy
3,964 Points<!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>
Bret Worthy
3,964 PointsThank you for your help.
Cui Gunter
12,518 PointsHi 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.
Bret Worthy
3,964 PointsSo 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
12,518 PointsAnytime. Could also be the browser. I'm using google chrome.