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

HTML How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Posted by Tanya Luthera
Tanya Luthera
473 Points

how to set the display element to inline-block ?

I am really confused, so if someone could help me...... <3

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}


nav ul{
  margin:0 10px;
  padding: 0;
  display: inline-block;
}

3 Answers

Gwyn Ellsworth
Gwyn Ellsworth
10,301 Points
Gwyn Ellsworth
Gwyn Ellsworth
10,301 Points

It looks like you've done it correctly. You just need to break out the nav's list item from the overall nav unordered list, where you have it now.

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points 
selector {
  display: inline-block;
}

Pretty straight forward isn't it?

selector decides which element should be styled.

display is called CSS property that is type of style that you want to apply.

Thing after colon is a property value which defines the spec of style such as 10px, block, bottom etc...

So the question was "Select the list item inside nav element and make it inline-block"

Then you want to select nav li which is nav list-item rather than nav ul which is nav unordered-list.

/*This targets any li element below nav.*/
nav ll {
  display: inline-block;
}

Also, try to avoid being very specific about selector.

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points 
nav ul li {
  margin:0 10px;
  padding: 0;
  display: inline-block;
}

does this work? display: inline-block; is correct

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

That won't work since margin and padding has to be applied on ul element. Applying it to li means whole another thing.