CSS CSS Layout CSS Layout Techniques Display

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>

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

2 Answers

So I found out the answer to the second part is

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

Brandon White
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

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
2,219 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
Treehouse Moderator

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
2,219 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
Treehouse Moderator

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.