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

Shawn Denham
seal-mask
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Front End Web Development Techdegree Student 17,733 Points

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.

Shawn Denham
seal-mask
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Front End Web Development Techdegree Student 17,733 Points

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.

Shawn Denham
seal-mask
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Front End Web Development Techdegree Student 17,733 Points

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 !!!