Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Yannis Vatis
Yannis Vatis
2,946 Points

CSS Display Modes Challenge Task 3 - What am I not understanding here?

I can't seem to figure out what it's asking me. I've changed the .logo display to both inline and inline-block but they don't work.

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

header {
  text-align: center;
}
.logo {
  display: inline-block;
  width: 110px;
  margin: auto;
}

.main-nav li,
.main-nav {
  display: inline-block;
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with 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="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>

This should work. i researched it on CSS Tricks. text-align: center; } .logo { width: 110px; margin: auto; }

.main-nav li{

display: inline-block;

}

  • li {

display: inline-block;

}

2 Answers

Anthony McCormick
Anthony McCormick
6,774 Points

It is asking you to put the logo on its own separate line. Both Inline and Inline-Block display properties mean that the element does not take up the full width of the container, thus is not on it's own line. You will need to change your logo to be a block element, see the code below.

.logo {
display: 'block';
}
Yannis Vatis
Yannis Vatis
2,946 Points

Thanks for the quick response and solution!

text-align: center; } .logo { width: 110px; margin: auto; }

.main-nav li{

display: inline-block;

}

  • li {

display: inline-block;

} Hope this works. The trick is the asterisk before the lo items as a class.