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 trialVijayakumar Subramani
10,419 PointsThe <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Le
The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it. Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav li {
display: inline-block;
}
.main-nav ul {
display: inline-block;
}
<!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>
12 Answers
Myles Young
Full Stack JavaScript Techdegree Graduate 22,056 PointsThis question is crazy... I had the right answer multiple times but it only takes one right answer : |
Marco Fregoso
379 PointsRight now you're doing this:
.main-nav ul {
display: inline-block;
}
Which means; select all "ul" elements nested inside elements with the class "main-nav", but if you look closely there isn't any "ul" element nested inside an element with the class "main-nav", the class "main-nav" is actually on the "ul" element itself:
<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>
So instead, you should be doing this:
.main-nav {
display: inline-block;
}
or even this:
ul.main-nav {
display: inline-block;
}
Which means select all ul elements with a class "main-nav". Hope it makes sense.
EDIT: Just remember that when adding a space in css next to a previous selector you're actually selecting the elements' descendants
.nav-link a {
font-size: bold;
}
The previous code selects all anchor elements nested inside all elements with the class .nav-link While the following actually selects all anchor elements with a "nav-link" class
a.nav-link {
font-size: bold;
}
Anita Hai
6,438 PointsThanks Marco!
Khashayar Mirbabaie Ghane
Full Stack JavaScript Techdegree Graduate 27,891 Pointsmarco i was stuck at this question for 30mins thank you so much
Mustafa Abrams
10,288 Pointsheader { text-align: center; } .logo { width: 110px; margin: auto; } .main-nav { display: inline-block;
} .main-nav li { display: inline-block; }
Asal Shamim
3,596 Points.main-nav, .main-nav li { display: inline-block;
}
Amit Kumar Singh
1,294 Points.main-nav, .main-nav li { display: inline-block; }
Kinjal Mehta
4,104 Pointsthanks
Abigirl Mulilo
2,677 Points.main-nav, .main-nav li { display: inline-block; }
Chloe Huling
5,778 Points^^^^ note the wording because mine was .main-list but this right here is the answer it's looking for.
Heba Hendy
7,786 Pointsmain-nav li { display: inline-block; } ul.main-nav { display: inline-block; }
mario mahilaj
4,437 PointsTry to do .main-nav li, .main-nav { display: inline-block } it worked out for me
Robert Roberson
Courses Plus Student 8,401 PointsStrangely. I have tried all the solutions here and none of them work.
Tyler Clarke
2,902 Pointsyou might just need to change the main-nav li { display: inline-block; } ul.main-nav { display: inline-block; } to main-list li { display: inline-block; } ul.main-List { display: inline-block; } some of the questions change wording
Cheryl Chao
5,555 PointsMe toooooo!!!!!!!! How ????!!!!!!!!!!!!
Kam Bains
2,002 PointsI have tried all the solutions too and none of them work.
Ashley Burns
Front End Web Development Techdegree Student 6,027 Pointsomg I was stuck on this for almost an hour
Terfa Nomhwange
6,568 PointsThere is something wrong with the Question. This teacher needs to review his work. hahahaha