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

CSS

ZoDo .
ZoDo .
13,135 Points
Posted by ZoDo .
ZoDo .
13,135 Points

Why the right padding seems not to be respected in this case?

When I apply box-sizing:border-box the left padding seems to be larger than the right. Why?

#lorenzo,
#lando {
    display: block;
}

#lorenzo {
    margin: 0 auto;
    text-align: center;
    background-color: red;
    height: 15%;
    width: 15%;
    padding: 300px 150px 300px 150px;
    box-sizing: border-box;
}

#lando {
    background-color: green;
    height: 15%;
    width: 15%;
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Cleaned up your pasted CSS a bit. Be sure to check out the Markdown Cheatsheet below the editor for more information.

1 Answer

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

My best guess without seeing the HTML along with this CSS is that the inner content is not wide enough to fill the full width of the containing element (minus applied padding).

By default, any content will align to the left of its parent element. If the text, image, or other inline element isn't wide enough to fill available horizontal space, it won't make it all the way to the right inner border defined by the parent element's padding. Try applying width: 100% to see if it helps. If not, include your HTML with your question and we can take a closer look.