CSS CSS Layout CSS Layout Techniques Display

Posted by Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points

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
Shawn Denham
.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
Shawn Denham
.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
Shawn Denham
.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

Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points
Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points

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 .

Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points
Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points

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

Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points
Yeukai Patience Shiripinda
Yeukai Patience Shiripinda
8,067 Points

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