CSS CSS Layout CSS Layout Techniques Display

Roberto Suarez
Roberto Suarez
1,222 Points

Im not sure if i am using the code in the wrong way but i can-t get through this one.

Im trying to answer both questions and i get random answers from the compiler.

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

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}
.main-list li, ul {
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>

1 Answer

Peter Vann
MOD
Peter Vann
Treehouse Moderator 35,207 Points

Hi Roberto!

For some reason, this challenge trips-up a lot of students, so don't feel bad...

One tip: don't allow a space between the property and the colon.

Like this:

  display: inline-block; /*** Right ***/

Not this:

diplay : inline-block; /***Wrong ***/

This passes all three tasks:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  display: block; /* Task 3: Puts the logo on it's own line */
  width: 60px;
  margin: auto;
}

.main-list, /* Task 2: narrows the menu */
.main-list li { /* Task 1: lines the menu items up horizontally */
  display: inline-block; 
}

Note:

This:

.main-list, /* Task 2: narrows the menu */
.main-list li { /* Task 1: lines the menu items up horizontally */
  display: inline-block; 
}

Is shorthand for:

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

I hope that helps.

Stay safe and happy coding!