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 CSS Layout Techniques Display

THERE IS NO ANSWER TO THIS QUESTION IVE TRIED EVERYTHING

Please assist i have no idea what Anwar wants i have tried all that i could think of..

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

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


ul.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>

5 Answers

You are SOOOOO close.

The issue is with the selector

ul.main-list li { display: inline-block; } 

Really look at what you are selecting there.

If you want me to straight up give you the answer I will :) just let me know.

Nope I have to retract that! I had to go back and really look at what you were selecting there. You are saying give me the li(s) that are the direct descendant of any ul that has a class of main-list....which is exactly what the exercise is asking for.

So what passes in the exercise is:

.main-list li {
  display: inline-block;
}

But

ul.main-list li {
   display: inline-block;
}

should work just fine too. I tested it on my side and got the same the result with both selectors.

It looks like you may have found a bug. We'll wait and see what others come up with.

cut and paste this in the css part of the exercise.

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

.main-list li{
  display: inline-block;
}

I literally just passed the exercise with the above css

Hi Shawn Denham thank you for responding.The thing is that i have tried your solution as well and its not working!!And now im feeling rather frustrated because the system keeps saying that i haven't completed the course because of this challenge .

let me try setting the height and width of the ul with the class main-list to fit-content...is that advisable in this case??Shawn Denham

Hi Shawn Denham Thanks lemme do that i will tell you how it goes !!!