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
True Andrews
Front End Web Development Techdegree Student 10,520 PointsI'm not sure what I'm doing wrong in the problem
What is the correct solution to this problem?
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav,
ul li {
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>
7 Answers
Blake Simpson
14,201 PointsI think you're addressing the Ul and the Li selectors... you just need to select the Li selector
True Andrews
Front End Web Development Techdegree Student 10,520 PointsI've tried both. Not working.
Jeremy Osborn
15,999 PointsI think Blake is right.
The ul element is the same as the "main-nav" element. Your code should look like this
.main-nav, li { display: inline-block; }
Jeremy Osborn
15,999 PointsTook out my spaces :(
Jeremy Osborn
15,999 Pointssorry for misleading you. I was focused on the removal of the ul element and glossed over the comma.
Corey Calhoun
7,854 PointsPretty sure you just need the li selected not the ul
Corey Calhoun
7,854 Pointsheader { text-align: center; } .logo { width: 110px; margin: auto; } .main-nav li{ display: inline-block; }
Gary Coomber
1,525 Points.main-nav li { display:inline-block; }
is what you need the comma in your code separates the CSS so what your effectively saying is:
.main-nav { display:inline-block; }
ul li { display:inline-block; }
Hope that helps.
Martha Brown
4,380 PointsHello True,
I think Blake and Jeremy are right about removing the comma after .main-nav and the ul. So it would be:
.main-nav li {
display: inline-block;
}
Hope it works.
Kind regards,
True Andrews
Front End Web Development Techdegree Student 10,520 PointsI already tried that and more but nothings work, I think there’s a glitch
Martha Brown
4,380 PointsI am sorry True for sending the same response as already others posted. I'm pretty new to coding, but I know one little thing like one letter being in the wrong case--that happened to my web page--I didn't realize my wW was uppercase!. Also, I just left off "px"-- when editing an image (just put "50" w/o "px"). If not a syntax error, hope you can soon find the glitch.
Cody Reed
Front End Web Development Techdegree Graduate 19,268 PointsCody Reed
Front End Web Development Techdegree Graduate 19,268 PointsHey True,
The answer lies in the type of selector used to target the list elements, which are "descendants" of the .main-nav class. Try removing the comma between .main-nav and li in your style sheet to target the li elements that are descendants of the .main-nav class; example would be:
.example-nav li { display: inline-block; }