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
SABCD ABCD
3,414 PointsWhat causes the main header and footer not to stretch across the entire window?
Hi guys. I'm trying to code this site just to practice some css, but the header and footer are not stretching all the way to the right.
<!DOCTYPE html> <html> <head> <title> Test site</title> <link rel="stylesheet" href="style.css">
</head> <body> <header id="top" class="main-header"> <span class="title">Sanjay Sudhakaran</span> </header> <p class="intro"> In 1999, I was introduced to the family pc for the first time. <br> THS TeST SITE.<br> From that point, I became more interested in how the computer actually worked.<br> THS TEST SITE.<br></p>
<div class="awards">
<p>AWARDS</p>
<div class="cirle1">
<p>Circle 1</p>
</div>
</div>
<div class="experience">
<p>EXPERIENCE</p>
<div class="logo1">Logo 1</div>
</div>
</body>
<footer class="main-footer">
<p>© All rights reserved by SSCorp</p>
<a href="#top">Back to top »</a>
</footer>
</html>
body { margin: 0; size: border-box; }
.main-header { height: 850px; width: 100%; background: black; }
.title { color: white; display: block; width: 100%; text-align: center; font-size: 3.565em; }
.intro { text-align: center; line-height: 2; font-size: 1.5em; }
.awards { background: lightblue; padding: 50px; margin: 20px 0 20px 0; width: 100%; }
.cirle1 { height: 100px; width: 100px; border-radius: 100%; background: white; }
.experience{ padding: 50px; margin: 20px 0 20px 0; width: 100%; }
.logo1 { height: 100px; width: 150px; background: gray; }
.main-footer { background: #33ffcc; width: 100%; }
Petar Zelenovic
11,356 PointsTake a look here: http://codepen.io/punpa/pen/KpxZzV
There seems to be no other problem (in terms of your original question). Both the header and the footer stretch all the way from the left to the right of the screen. Btw. I've added the text-align: center to your footer.
Assuming you did add the footer tag and you are still facing issues I don't see what else might be the problem in your code. If not the code then you might be using a browser that does not support what you need...
SABCD ABCD
3,414 PointsI took a look at the link and still saw the same problem even with the footer tag included. Are you able to scroll to the right in the code pen preview? If you do that, are you able to see white space next to the header and footer?
Petar Zelenovic
11,356 PointsAh, yes, my mistake, you were right. I think that the problem was caused by the padding of 50px that you set to the .awards and .experience classes. When you remove those that whitespace on the right side disappears. I think that's because the padding increases the size of the element which is initially set to fill out 100% of the viewport.
SABCD ABCD
3,414 PointsYou are a genius Petar! That's completely fixed the problem. I can't seem to choose your answer as best answer for some reason, I think the link is not loading properly. I'll try again later. Thanks for taking so much time for this!
1 Answer
Petar Zelenovic
11,356 PointsHi Sanjay,
You forgot to add the footer in the html.
The last part of your page should look something like the following:
<footer class="main-footer">
<p>© All rights reserved by SSCorp</p>
<a href="#top">Back to top »</a>
</footer>
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsSanjay, you couldn't give best answer because the reply was posted as a comment. Fixed that for you. (kind of)
See comments above for full solution.
SABCD ABCD
3,414 PointsCheers James!
SABCD ABCD
3,414 PointsCheers James!
Petar Zelenovic
11,356 PointsThanks James :)
SABCD ABCD
3,414 PointsSABCD ABCD
3,414 PointsHi Petar,
I did add the footer actually but for some reason it is not showing in the post. When I clicked edit post to change it, it is there exactly as you showed. Assuming the footer is there, would this cause the problem I am referring to?