Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Yannis Vatis
Yannis Vatis
2,946 Points
Posted by 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>
anthony cummings
anthony cummings
9,961 Points

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
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
Yannis Vatis
Yannis Vatis
2,946 Points

Thanks for the quick response and solution!

anthony cummings
anthony cummings
9,961 Points
anthony cummings
anthony cummings
9,961 Points

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.