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 Lydia Smith
Lydia Smith
1,203 Points

CSS Challenge Task 2 of 3

I have no idea. Was stuck on challenge 1. Cannot review lesson or skip question either. Help appreciated.

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>
Lydia Smith
Lydia Smith
1,203 Points

Is it possible to just show me the answer?

3 Answers

Peter Vann
Peter Vann
36,425 Points

Hi Lydia!

Basically, these three challenges are just testing to make sure you understand the difference between block and inline-block display property settings.

This passes all three challenges:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  display: block; /* passes challenge 3 */
  width: 60px;
  margin: auto;
}
.main-list, /* passes challenge 2 */
.main-list li { /* passes challenge 1 */
  display: inline-block;
}

display: block makes the element take up the full width of its parent container (which mean list items with this setting should stack vertically)

display: inline-block makes the element only as wide as its content (which mean list items with this setting can layout side-by-side horizontally, the way most desktop nav menus are laid-out)

More info:

https://www.w3schools.com/css/css_display_visibility.asp

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

I hope that helps.

Stay safe and happy coding!

Christina Parks
Christina Parks
1,408 Points
Christina Parks
Christina Parks
1,408 Points

Thank you so much. I was stuck on this and now I realize I just needed to add .main-list to the declaration.

Lydia Smith
Lydia Smith
1,203 Points
Lydia Smith
Lydia Smith
1,203 Points

Thank you Peter. Your answer was helpful :) Have a great evening!

Zedrick Palmer
Zedrick Palmer
3,383 Points

Yeah, same here. Question 2 made no sense to me and became frustrating so I'm glad to see someone else has solved this problem let alone someone else also having the same issue as me:)

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

Also, keep in mind, this:

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

Is just a shorthand way of writing:

.main-list { /*** The parent ul ***/
  display: inline-block;
}
.main-list li {
  display: inline-block; /*** The individual list items ***/
}

In other words, you can target multiple elements with the same CSS styling, by separating the targets with commas.

I hope that helps.

Stay safe and happy coding!