CSS CSS Layout CSS Layout Techniques Display

Change the display of .main-list to the display value that generates a block element that doesn't take up a full line.

Change the display of a class to the display value that generates a block element that doesn't take up a full line.

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

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}
.main-list{
  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>
Reggie Williams
seal-mask
.a{fill-rule:evenodd;}techdegree
Reggie Williams
Treehouse Teacher

Hey larryjones4 are you getting the error about list items being selected? Make sure that you are selecting the correct item in

2 Answers

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 21,764 Points

Hi Larry,

Yes I believe Reggie pointed you in the right direction.

You are selecting the class "main-list" but you need to select the <li> items below that class. The class is on the <ul>.

So this should work:

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

Happy and safe coding!

Peter Vann
Peter Vann
36,049 Points

Hi Larry!

This passes all three tasks:

/* Complete the challenge by writing CSS below */

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

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

Keep in mind - this:

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

is just shorthand for this:

.main-list { /***  Targets the whole list  ***/
  display: inline-block;
}
.main-list li { /*** Targets the individule list items. ***/
  display: inline-block;
}

I hope that helps.

Stay safe and happy coding!