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
Derek Zinger
3,337 PointsCSS 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
3,337 PointsThanks for your help on this, Andrew. The issue was a glitch with the code editor itself.
Regards Derek
Andrew Shook
31,709 PointsYou need to add a negative margin right since the padding is being added to both the right and the left side.
Derek Zinger
3,337 PointsThanks, 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
31,709 PointsYes, 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
3,337 PointsThanks, Andrew. I'll have another try and see if it solves the issue.