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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by Daniel Wagner
Daniel Wagner
13,389 Points

I can't get the the 5% white padding to show on the left side.

I can't get the 5% white padding to show on the left side of the screen unless I resize the browser window larger than the actual screen resolution. If I change the 5% to 15% it will move the section over accordingly, but still no white padding on the left side. I am running Chrome on Linux at 1024x768, and also tried it on Vista with Chrome at 1024x768. My main.css is as follows:

a {
  text-decoration: none;
}

#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
background: orange;
}

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hi Daniel.

I think there is a bit of an error in the box model methodology you may be using :)

Here is a quick run down on the ordering: Margin (the outside of the container), Border (the edge of the ontainer), Padding (contentless area inside the container), Height/width of box (self-explanatory)

note: the total height and width is calculated by adding together all the above attributes so I have added an extra piece of CSS below (box-sizing) which will make sure it never goes any wider than what you set it to

If you set the padding on a container, it will add the extra to the inside of the box

<div id=wrapper>
    <div id=""inner-container></div>
</div>

* {
box-sizing: border-box; /* this will help with any issue you have of containers going outside their parent containers */
}

#wrapper {
max-width: 940px;
margin: 0 auto;
}

#inner-container {
width: 100%;
margin: 0 5%; /* this will add 5% 'white-padding' (margin) to the left and right (use margin-left if you only want it to be on the left) */
background: orange;
}

Hope I was right on what you were trying to achieve :)

p.s A great tool to use is the dev-tools on chrome. There is a a course on it here. It is great to get a visual check on the box model attributes you are using :)

Daniel Wagner
Daniel Wagner
13,389 Points

main.css like this? 

a {
  text-decoration: none;
}

* {
box-sizing: border-box;
}

#wrapper {
max-width: 940px;
margin: 0 auto;
}


#inner-container {
width: 100%;
margin: 0 5%; 
background: orange;
}

And index.html like this?

   <nav>
        <ul>
          <li><a href="portfolio.html">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">
        <div id="inner-container"></div> 
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with colors and textures</p>

I can't tell if I have a 5% margin or not, because the background is now white again. I watched the video four times more on half speed to make sure I had entered the code correctly. It is exactly as shown in the video. Could it be an error in the lesson? Should I be worried about this or just move on to the next lesson? I'm thinking they wouldn't be having me add in extra elements they have not covered yet in order to finish the lesson this early in the course.

Thank you for very timely response. :)

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Oh! I didn't realise it was from a tutorial. I'll look at it first thing tomorrow and get back to you (unless someone else does first) :)

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey again man. I've just watched the video and your code is correct. You aren't supposed to permenetantly have the 5% white space because it is padding. This will affect the inside of the container, not the outside. If you only sometimes have white space, you're doing it right :)

If you think it still isn't right, set up a copepen or share the workspace you are working on :)

Daniel Wagner
Daniel Wagner
13,389 Points
Daniel Wagner
Daniel Wagner
13,389 Points

I set my resolution higher and the padding behaved the way it did in the video. Thanks for you help!

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

No problem man. Remember to up vote and hit best answer on the answers that helped the most. It will help other Users who are struggling with the same problems you are to find the solutions :)