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 trialBryanna Zotter
Front End Web Development Techdegree Student 1,889 PointsBlock/Inline/Inline-block Display Value Help??
I think I've got the box-sizing correct, but I can't figure out what display value the instructions want.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 60px;
margin: auto;
}
.main-list li {
display: inline-block;
box-sizing: content-box;
}
<!DOCTYPE html>
<html>
<head>
<title>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="An illustration of a building">
<ul class="main-list">
<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
Busra Tokuc
7,444 PointsHi Bryanna, There is no need to use the box-sizing property in this challenge. You did well in the first step, setting list items' display value to inline-block. You should do the same for ul(.main-list) in the second step. Check these:
ul{
display: inline-block;
}
or
.main-list {
display: inline-block;
}
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 PointsThank you so much! So when the instructions said "Set .main-list to be as wide as the content inside it.", that was accomplished with the inline-block value??
Busra Tokuc
7,444 PointsYes, That's right. <ul> element is a block-level element by default. A block element always starts on a new line, and fills up the horizontal space left and right on the web page. Inline-block elements don’t start on a new line, they appear on the same line as the content and tags beside them. They don't take up the full line. They are as wide as the content inside it. Check this article for differences between them.
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 PointsThank you, thank you! I really appreciate your help!
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 PointsBryanna Zotter
Front End Web Development Techdegree Student 1,889 PointsTo clarify, here's a copy of the instructions:
The <ul> with the class main-list is a block-level element by default, so it takes up its container's full width. Set .main-list to be as wide as the content inside it. Change the display of .main-list to the display value that generates a block element that doesn't take up a full line.