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

Posted by Kiara Stewart
Kiara Stewart
4,283 Points

How to set class / container to be as wide as the content inside it?

Width at 100% is not working.

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}

.main-list li {
  width: 100%;
  display: inline-block;
}
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>

2 Answers

Peter Vann
Peter Vann
36,427 Points

Hi Kiara!

Two tips:

1) display: block - makes an element take up the entire width of the parent container.

2) display: inline-block - makes an element be only as wide as its content (which is how a horizontal desktop nav menu layout is achieved from a list).

This passes all three:

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  display: block; /* This passes the third challenge */
  width: 60px;
  margin: auto;
}

.main-list, /* This passes the second challenge */
.main-list li { /* This passes the first challenge */
  /* width: 100%; You don't need this */
  display: inline-block;
}

More info:

https://www.w3schools.com/css/css_inline-block.asp

I hope that helps.

Stay safe and happy coding!

Abigail Edwards
Abigail Edwards
2,890 Points
Abigail Edwards
Abigail Edwards
2,890 Points

Hm I found this to be a bit confusing. Because you are setting display: inline-block to both the list item within .main-list and then main-list itself. It seems like it's calling itself within itself?

And I guess reading the instructions I wasn't clear to me that this was being asked. "Change the display of .main-list to the display value that generates a block element that doesn't take up a full line." I thought both challenges were only talking about the list items but the goal was to get the logo to be in line with the list items but the logo is outside of the main-list class so its confusing to me how setting this in the main list class makes the logo also inline

Mark Sebeck
Mark Sebeck
Treehouse Moderator 37,888 Points
Mark Sebeck
Mark Sebeck
Treehouse Moderator 37,888 Points

Hi Abigail. Don' think of it as "setting display: inline-block to both the list item within .main-list and then main-list itself." There is no calling like in programming. You are setting .main-list and main-list li both to inline-block. Adding them with the comma is a nice shortcut. You can also do this:

.main-list  {
  display: inline-block;
}
.main-list li {
  display: inline-block;
}

This is ok to do when learning but it violates the DRY method so it's something you would want to combine eventually. Hope this clears it up a little.

Kiara Stewart
Kiara Stewart
4,283 Points

Thank you! So basically setting an inline-block within an inline-block. Cool!

Abigail Edwards
Abigail Edwards
2,890 Points
Abigail Edwards
Abigail Edwards
2,890 Points

Thank you Mark that is helpful! So setting inline-block to main-list li set all the LIST items to be in-line block. And setting in-line block to min-list sets the whole parent css block to be inline what whatever is on top of it in the HTML doc flow?

I think I have a little confusion because the only things in main-list block are the list items so I am wondering why we need to set both the list items and the main-list to block?