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 Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Kyle Clarke
Kyle Clarke
4,680 Points
Posted by Kyle Clarke
Kyle Clarke
4,680 Points

CSS LAYOUT

The logo is an <img>, so it displays inline with surrounding content by default. The logo displays on the same line as .main-nav and the auto margins have no effect on it.

i know the first two steps but last step is givin me a hard time

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Kyle;

Can you post your code please?

Thanks,
Ken

7 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

You might try:

.logo {
  display: block;
}

Remember too, that you can make your code less verbose by combining steps 1 & 2 into:

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

Happy coding,
Ken

dangermin field
dangermin field
10,592 Points
dangermin field
dangermin field
10,592 Points

.main-nav li, .main-nav { display: inherit; }

Kyle Clarke
Kyle Clarke
4,680 Points
Kyle Clarke
Kyle Clarke
4,680 Points 
header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}
.main-nav li {
  display: inline-block;
}
  .main-nav li {
  display: inline-block;
  }
Kyle Clarke
Kyle Clarke
4,680 Points
Kyle Clarke
Kyle Clarke
4,680 Points

The logo is an img, so it displays inline with surrounding content by default. The logo displays on the same line as .main-nav and the auto margins have no effect on it. Place the .logo on a separate line by changing its display mode.

that's the full question.

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

For task 2 you just want to be targeting .main-nav and not the li elements again.

Ken

Kyle Clarke
Kyle Clarke
4,680 Points
Kyle Clarke
Kyle Clarke
4,680 Points

yes i did that but talk about task 3

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Oops. Sorry. Let me take another look.

Igor Gasperec
Igor Gasperec
5,699 Points
Igor Gasperec
Igor Gasperec
5,699 Points

Just change display to block .logo {display: block;}