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 CSS Layout Techniques Display

Posted by Jessica Reyes
.a{fill-rule:evenodd;}techdegree
Jessica Reyes
Front End Web Development Techdegree Student 2,063 Points

Display inline-block?

I checked a few of the other answers and it seems I keep getting it wrong.

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}


.main-list li {
  display: inline-block;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <header>
            <img class="logo" src="city-logo.svg" alt="An illustration of a building">
            <ul class="main-list">
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>
Gavin Johnston
Gavin Johnston
9,107 Points

Your answer for challenge 1 (.main-list li) is correct.

Are you having an issue with challenge 2? you're asked to apply the same display value to the class associated with the ul tag.

1 Answer

Peter Vann
Peter Vann
36,427 Points
Peter Vann
Peter Vann
36,427 Points

Hi Jessica!

The whole purpose of these challenges is basically to demonstrate that you understand the difference between the block and inline-block settings for the display property (and child selectors, as well).

display: block - sets the element to be the full width of its parent container display: inline-block - sets the element to be only as wide as its content (and is what allows a list to layout horizontally like a desktop nav menu).

This passes the first challenge:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}

.main-list li { /***  #1  ***/
  display: inline-block;
}

This passes the second:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}

.main-list,  /***  #2  ***/
.main-list li {
  display: inline-block;
}

This passes the third:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  display: block;  /***  #3  ***/
  width: 60px;
  margin: auto;
}

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

More info:

https://www.w3schools.com/css/css_inline-block.asp

https://www.w3schools.com/cssref/css_selectors.asp

I hope that helps.

Stay safe and happy. coding!