Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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;
}