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 CSS Basics (2014) Basic Layout Floats

Elvira Gizatullina
Elvira Gizatullina
14,780 Points
Posted by Elvira Gizatullina
Elvira Gizatullina
14,780 Points

give .wildlife the property and value that forces any padding and border widths into its total width and heigh. Help..

I try everything and wouldn't give me correct answer and it crashed 5 times. Can you tell me what the correct answer to this question...

1 Answer

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Elvira,

The last step of the challenge is asking you to set the box-sizing property to border-box.

To explain box-sizing: border-box quickly, imagine that you had an image and specified the image to be 250px wide. Then you added a 25px margin and 30px of padding. Without specifying border-box: box-sizing, the true width of the element would not be 305px, since it margins and padding are added on top of any specified element dimensions by default.

By specifying box-sizing: border-box, we tell the parser to include the 25px margin and 30px of padding inside the specified width of 250px. This way, the element remains 250px, and while our image will be a little less wide as a result, it doesn't create confusing positioning issues with other elements on the page since we know the element will remain 250px in width.

The working code is:

/* Complete the challenge by writing CSS below */

.wildlife {

  background-image: url('img/bear.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;

}

Good luck with the course!