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

What 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>&copy 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%; }

Hi 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?

Petar Zelenovic
Petar Zelenovic
11,356 Points

Take 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...

I 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
Petar Zelenovic
11,356 Points

Ah, 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.

You 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
Petar Zelenovic
11,356 Points

Hi 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>&copy All rights reserved by SSCorp</p>
<a href="#top">Back to top &raquo;</a>  
</footer>

Sanjay, 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.

Cheers James!

Cheers James!