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 Foundations The Box Model Width, Height and Overflow Properties

Posted by Joshua szkodlarski
Joshua szkodlarski
8,604 Points

I have no idea what to do

Its asking me to do this "Currently, the width of the div with the class main is set to 400px, but the padding applied is adding an extra 40 pixels to its total width. Add a property that forces the padding into the width of the div." I don't know what to do

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Width, Height and Overflow Properties</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>   
    <nav>
        <a href="#">About Me</a>
        <a href="#">My Work</a>
        <a href="#">Contact Me</a>
    </nav>
    <div class="main">
        <p>Veggies sunt bona vobis, proinde vos postulo esse magis kohlrabi courgette sorrel rock melon summer purslane soybean bitterleaf fennel.</p>
        <p>Pumpkin ricebean gourd cauliflower water chestnut garlic parsley bunya nuts earthnut pea tomato lettuce. Swiss chard chickpea burdock soybean soko cucumber garlic wakame pea arugula azuki bean turnip greens spinach eggplant.</p>
        <p>Arugula cress bitterleaf rutabaga potato burdock celery chard eggplant desert raisin.</p>
    </div>
</body>
</html>
style.css 
nav a { 
  display: inline-block;
  width: 100px;
}

2 Answers

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

You're probably looking for the box-sizing property with the value border-box.
This forces the padding and borders to be calculated in any sizes you define; margins are still 'outside'.

.main {
    ---
}
Joel Smith
Joel Smith
14,779 Points
Joel Smith
Joel Smith
14,779 Points 
nav a { 
  display: inline-block;
  width: 100px;
  padding: auto;
}

the extra padding is too much. so putting it at auto will keep it from adding extra width to the div.