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 Jacob Boykin
Jacob Boykin
8,424 Points

How much negative margin do I need?

Here's the question for the code challenge I'm stuck on:

"It looks like the whitespace between our columns is causing the secondary column to break to the next line. Let's create a new rule that removes the whitespace with a negative margin. "

And here's my code: 

/* Complete the challenge by writing CSS below */
.main-header {
    padding: 5px;
}

.main-logo, .main-nav, .main-nav li, .col {
    display: inline-block;
}

.col {
    margin-left: -5px;
}

In the preview of the code challenge, adding this negative margin does fix the issues but I am not passing the code challenge. What is the proper way to solve this problem?

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Have you tried the shorthand? margin: 0 0 0 -5px;

The way I remember what's what in shorthand is by looking at my monitor and drawing a box mentally, top, right, bottom, left.

Jacob Boykin
Jacob Boykin
8,424 Points

I just figured it out. The code challenge question was looking for a margin-right property rather than left, and now I've passed the section. Thank you for your response!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Jacob Boykin If you add your solution as an answer you can mark it as solved then to help other users in the future :)

1 Answer

Jacob Boykin
Jacob Boykin
8,424 Points

The challenge was looking for a margin-right property rather than left. Here's the change I had to make: 

/* Complete the challenge by writing CSS below */
.main-header {
    padding: 5px;
}

.main-logo, .main-nav, .main-nav li, .col {
    display: inline-block;
}

.col {
    margin-right: -5px;
}