CSS CSS Layout CSS Layout Techniques Display

Lydia Smith
Lydia Smith
1,120 Points
Posted by 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
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
Peter Vann
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
Lydia Smith
Lydia Smith
1,120 Points

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