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

Api Hemi
seal-mask
.a{fill-rule:evenodd;}techdegree
Api Hemi
Front End Web Development Techdegree Student 2,435 Points
Posted by Api Hemi
.a{fill-rule:evenodd;}techdegree
Api Hemi
Front End Web Development Techdegree Student 2,435 Points

Please help.

I am so lost

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

header {
  text-align: center;
}
.logo {
  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>

1 Answer

Katie Wood
Katie Wood
19,141 Points
Katie Wood
Katie Wood
19,141 Points

Hi there,

I'm guessing you're on the third step, since it looks like the code you have would satisfy the first two. Basically, it's asking that you make the image with the 'logo' class take up its own line. This is the opposite of what you've done with main-nav, and there's already a section for .logo. The wording is a bit tricky, but what it's asking you to do is make .logo display in block mode. Like this:

.logo {
  width: 110px;
  margin: auto;
  display: block; //add this line
}