CSS CSS Layout CSS Layout Techniques Display

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

Is it possible to just show me the answer?

2 Answers

Peter Vann
MOD
Peter Vann
Treehouse Moderator 31,785 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!

Lydia Smith
Lydia Smith
1,120 Points

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