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 Layout Techniques Display Modes Display Modes Challenge

Posted by DALE PETERSEN
DALE PETERSEN
6,773 Points

Padding in CSS

Since there is no border, padding, or content to separate the top margin of our logo with the top margin of the body, we're seeing a margin collapsing issue in the header. Let's fix this by giving .main-header 5px of padding on each side.

I gave the following answers: .main-header { padding-left: 5px; padding-right: 5px; } .main-header { padding: 0 5px;

} .main-header { padding: 0 5px;

}

All were incorrect. what I am I doing wrong?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">  
        <header class="main-header">
            <h1 class="main-logo"><a href="#">My Work</a></h1>
            <ul class="main-nav">
                <li><a href="#">Design</a></li>
                <li><a href="#">Coding</a></li>
                <li><a href="#">Writing</a></li>
                <li><a href="#">Hire Me!</a></li>
            </ul>
        </header>
        <div class="primary col">
            <h1>I'm a Front-end Designer</h1>
            <p>I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript. I love including personal photographs of nature, people and everyday things in my designs.</p>
            <p>If you need a front-end designer for your next project, <a href="#">take a look at my work</a>, then <a href="#">get in touch</a>!</p>
        </div>
        <div class="secondary col">
            <h2>I Also Write</h2>
            <p>I like teaching others about the latest in web technology. So when I'm not designing or coding websites &amp; apps, you'll find me writing <a href="#">articles for my blog</a>.</p>
        </div>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

.main-header {
        padding: 0 5px;
    }

3 Answers

Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

Hi, Dale. When they say 'each side', I think they mean all four sides, not just left and right.

.main-header {
  padding: 5px;
}
DALE PETERSEN
DALE PETERSEN
6,773 Points

Yes you are correct. I tried the answer you said just after I submitted the question and it work. Thank you for your time.

Connor Mills
Connor Mills
2,819 Points
Connor Mills
Connor Mills
2,819 Points

Dale, I second Kelly. Go a head and try .main-header { padding: 5px; }
That should separate the margins!

DALE PETERSEN
DALE PETERSEN
6,773 Points

Yes Kelly was correct. I tried the answer Kelly said just after I submitted the question and it work.