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

Derek Zinger
Derek Zinger
3,337 Points

CSS Layout Techniques - Display Modes Challenge. Page looks good, but it tells me it's wrong.

I'm doing the first Code Challenge in the CSS Layout Techniques course, and am at a point where I've solved the display issue on the page, but am not being allowed to continue on.

The problem at hand is that there are two divs set to display: inline-block, but which are displaying one on top of the other. The task is to make them display side by side. I have them doing just that, yet the code editor tells me my answer is wrong.

It says the make sure I have negative margin on the .col style. Well, I DO! Here's my CSS (pardon the lack of formatting; I'm on an ipad and don't have a back tick key):

.main-header { padding: 5px; }

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

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

Now, technically I'd say that we only need to add the negative margin to the .secondary style, but ok, I'll add it to the .col style because that's what's suggested. Still, Treehouse won't let me pass. Why not? Thanks!

4 Answers

Derek Zinger
Derek Zinger
3,337 Points

Thanks for your help on this, Andrew. The issue was a glitch with the code editor itself.

Regards Derek

Andrew Shook
Andrew Shook
31,709 Points

You need to add a negative margin right since the padding is being added to both the right and the left side.

Derek Zinger
Derek Zinger
3,337 Points

Thanks, for replying Andrew.

Are you sure a margin on both sides is necessary? I added margin-left: -5px to the right-hand div, and visually the problem was solved (yet it was counted as wrong). Plus, in the video, I'm pretty sure Gill only added the negative margin to one side of the divs.

Andrew Shook
Andrew Shook
31,709 Points

Yes, I just retook the challenge and if you put:

.main-header{ padding: 5px;}

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

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

it will pass.

Derek Zinger
Derek Zinger
3,337 Points

Thanks, Andrew. I'll have another try and see if it solves the issue.