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 trialLeo Marco Corpuz
18,975 PointsIm not clear on this css challege question
Not sure of the display value, I've tried the block,inline, and inline-block and they're all incorrect.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav li {
display:inline
<!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>
1 Answer
Steven Parker
231,072 PointsOne of your guesses was correct, and you would have passed but the CSS rule is missing the closing brace ("}") at the end.
Leo Marco Corpuz
18,975 PointsLeo Marco Corpuz
18,975 PointsThanks, that answers the first part of the challenge. On the second part, they're asking for a block element that doesn't take up a full line. Block,inline-block, and inline wouldn't work.
Steven Parker
231,072 PointsSteven Parker
231,072 PointsOnce again, you've already tried the correct answer. Look carefully for some issue elsewhere in the structure of the rule.
Show your new code here if you still have trouble spotting it.
Leo Marco Corpuz
18,975 PointsLeo Marco Corpuz
18,975 PointsHere's the css code: header { text-align: center; } .logo { width: 110px; margin: auto; }
.main-nav li { display:inline-block }
When display is either block or inline, it asks for the correct display value. When the display is set to inline-block, it asks to to make sure I select the main-nav class.
Steven Parker
231,072 PointsSteven Parker
231,072 PointsI only see your fixed task 1 code here. Where's the new rule you added for task 2 (the one that selects the
main-nav
class)?And when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. Or watch this video on code formatting.
Leo Marco Corpuz
18,975 PointsLeo Marco Corpuz
18,975 PointsOk, thanks I got it. I had to make a new css declaration targeting the main-nav class. I thought I just had to change the display value of .main-nav li from the first part.