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 odysseywow
odysseywow
2,783 Points

The <ul> with the class main-list is a block-level element by default, so it takes up its container's full width. Set .m

This has me stumped

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

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}
.main-nav li {
  display: block;
  width: 100%;
}
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>
odysseywow
odysseywow
2,783 Points

I had it at inline-block, but it didn't work

2 Answers

odysseywow
odysseywow
2,783 Points

So I found out the answer to the second part is

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

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi odysseywow,

.main-list is already a block-level element, so it's width is already 100%.

inline-block is the correct way to go with the display property, but you don't want to set the width to 100%, you want it to only be as wide as it needs to be to show the list-items nested within it. So you'll want to set the width property to the content.

Also, I'm assuming that you changed .main-list to .main-nav because you weren't sure what else to do, and so you simply started trying things. If so, make sure you change it back to .main-list.

Your final code will look like the code below.

.main-list {
  display: inline-block;
  width: content;
}
Oban Al-Rekabi
Oban Al-Rekabi
3,837 Points

I tried it its not the answer, I tried putting the width at 30% as well and still nothing.

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Oban,

Are you sure you tried .main-list and not .main-list li? (The second part of the challenge asks you to change the ul element with a class of main-list, not the list items nested directly within them, so if you tried setting the display to inline-block and the width to content for .main-list li, then that won’t affect the ul element just its list items).

Also, did you make sure things were spelled correctly?

Oban Al-Rekabi
Oban Al-Rekabi
3,837 Points

Hi,

I did it exactly as you have written and its still wrong. It says make sure you're selecting the list items inside '.main-list'. and when input '.main-list li', it says: Make sure you're selecting the class 'main-list'. In both cases I get a wrong answer.

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Oban,

It sounds to me like you are only including code for one element or the other, but not both.

The first challenge asks you to set the display for list items nested within the element with a class of main-list.

The second challenge then asks you to target a totally different element. It asks you to target the ul element with a class of main-list, so you can’t just change the code within:

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

So if you simply added the width property and the content value inside that current css rule, then you would rightfully be told that you’re not selecting the class main-list.

But if you then remove the li from the current css rule so that you are targeting the ul with the class of main-list, like so:

.main-list {
  display: inline-block;
  width: content;
}

Then you will rightfully be told that you’re not selecting the list items inside .main-list.

This isn’t an either or situation. You’re meant to add on to each challenge. So you need both css rules.

Hope that helps you out. Good luck.