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 trialYannis Vatis
2,946 PointsCSS Display Modes Challenge Task 3 - What am I not understanding here?
I can't seem to figure out what it's asking me. I've changed the .logo display to both inline and inline-block but they don't work.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
display: inline-block;
width: 110px;
margin: auto;
}
.main-nav li,
.main-nav {
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>
2 Answers
Anthony McCormick
6,774 PointsIt is asking you to put the logo on its own separate line. Both Inline and Inline-Block display properties mean that the element does not take up the full width of the container, thus is not on it's own line. You will need to change your logo to be a block element, see the code below.
.logo {
display: 'block';
}
Yannis Vatis
2,946 PointsThanks for the quick response and solution!
Anthony McCormick
6,774 PointsYou're welcome.
anthony cummings
9,961 Pointstext-align: center; } .logo { width: 110px; margin: auto; }
.main-nav li{
display: inline-block;
}
- li {
display: inline-block;
} Hope this works. The trick is the asterisk before the lo items as a class.
anthony cummings
9,961 Pointsanthony cummings
9,961 PointsThis should work. i researched it on CSS Tricks. text-align: center; } .logo { width: 110px; margin: auto; }
.main-nav li{
display: inline-block;
}
display: inline-block;
}