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 Ulyssa Sneed
Ulyssa Sneed
8,894 Points

lock-level element by default, so it takes up its container's full width. Set .main-list to be as wide as content???

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

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


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

}
.main-list ul {
display: inline;
width: auto;

}
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

Ryan Groom
Ryan Groom
18,674 Points

hey Ulyssa Sneed you're on the right track, but if you look in the HTML code you'll realize that the element that has the .main-list class on it is the <ul> item. So in your CSS when you are targeting ".main-list ul" you are actually trying to target a "ul" element that is a child of the ".main-list" element which does not exist because they are actually the same element. As for the rest, you do not need the "width: auto;" and your display should actually be set to "display: inline-block;". Your final result should look like:

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

Let me know if you have any questions.

Matt WebDev218
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points
Matt WebDev218
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points

Hi Ulyssa Sneed, Ryan is correct about the class selector, although I don't think you need to set it to inline block unless you want to have another element on the same line within it's parent. But if you want to center your LI's you will also need to remove padding from the .main-list class, as UL's have some by default. I set it to margin auto as I find it makes the element easier to style than using width: 100%. If you add a background or border the margin will be outside of that. 

.main-list {
   padding: 0;
   margin: auto;
}