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

CSS CSS Layout CSS Layout Techniques Display

Bryanna Zotter
seal-mask
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points
Posted by Bryanna Zotter
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points

Block/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.

style.css 
/* 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;
}
index.html 
<!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>
Bryanna Zotter
seal-mask
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points
Bryanna Zotter
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points

To 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.

2 Answers

Busra Tokuc
Busra Tokuc
7,444 Points
Busra Tokuc
Busra Tokuc
7,444 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points
Bryanna Zotter
.a{fill-rule:evenodd;}techdegree
Bryanna Zotter
Front End Web Development Techdegree Student 1,889 Points

Thank 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
Busra Tokuc
7,444 Points
Busra Tokuc
Busra Tokuc
7,444 Points

Yes, 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.