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
Carl Sergile
16,570 PointsThe <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container.
No idea how to answer this question...... This is the 2 out 3 question.
this is my code: Also I've tried a variety of things and nothing seems to be working.
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav ul li {
display: inline-block;
}
**Ive also had 2 main-navs and they seem to not work as well so my last attempt was to put them together.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
<!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>
5 Answers
Josue Joel Galicia Gomez
Front End Web Development Techdegree Student 4,524 PointsYou can accomplish the steps one and two of this challenge with this
.main-nav,
.main-nav li{
display: inline-block;
}
Siddhant Mehra
Courses Plus Student 1,227 PointsHey carl ,
.main-nav ul li { //remove ul only target li here
display: inline-block;
}
Dipika Purohit
Courses Plus Student 20,955 Pointsheader { text-align: center; } .logo { width: 110px; margin: auto; } .main-nav li { display: inline-block; } .main-nav, .main-nav li{ display: inline-block; }
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi Carl,
There is a problem with the selector you are using.
.main-nav ul li { }
This line is saying "find the element with the class of .main-nav then select the ul that follows it." - which doesn't make sense to the browser because .main-nav is the ul.
We want select the list items inside of .main-nav, so we can just write:
.main-nav li {}
Which says "find the element with the class of .main-nav then select the list items that follow it."
Hope this helps :)
William Barnes
Front End Web Development Techdegree Student 6,597 PointsThe second question just wants you to target the .main-nav class. So if you create a new rule and then change the .main-nav's width to 100% of its container and change its display.
.main-nav li {
display: inline-block;
}
.main-nav {
}