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

What am i doing wrong? I keep getting it wrong

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.

.main-logo, .main-nav, .main-nav li, .col{

display:inline-block; word-spacing:-1.0px;

}

3 Answers

Travis Birch
Travis Birch
3,602 Points

First you want to remove the white-space from between the 2 columns and then use a negative margin to allow both columns to fit in the same block. I also used the vertical-align to move the column to the top. I just finished that challenge. If you are having problems rewatch the previous videos.

.main-header  {
    padding: 5px;
}

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

.col {
  white-space: none;
  margin-right: -5px;
  vertical-align: top;

} ```

Hi Jorge,

First, the code challenge here is instructing you to add a rule to the columns; not .main-logo, .main-nav, etc. So this rule will be applied to .col only. The code challenge is instructing you to use a negative margin, so we will apply that to the columns only. You will probably have to play with the margins a little to make it work but the code below should work.

Jeff

.col {
    margin-right: -4px;
}
Brian Hinton
Brian Hinton
8,604 Points

The first thing to do is define the key things you are trying to accomplish.

  1. Remove whitespace
  2. Create a negative margin

Now you need to understand what is whitespace, and how to control margins with CSS. Give it a quick search.