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 Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Posted by Chris Roper
Chris Roper
11,001 Points

css layout basics, display inline-block task 2

Right I've tried many combinations and it always seems to tell me to target the .main-nav class, which I pretty sure I have been is the something really obvious I've been missing? Any help is much appreciated.

Challenge Task 2 of 3

The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it. Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

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

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

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

.main-nav ul {
  display: inline-block;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with 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="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>

3 Answers

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

You don't need the ul tag after .main-nav since the ul has the class of main-nav. The way you have it written, it is trying to select a ul element inside of an element with the class .main-nav.

.main-nav {
  display: inline-block;
}
Chris Roper
Chris Roper
11,001 Points

Cheers, I did actually try that on one of my previous attempts. But I think I might of miss typed something, as it didn't like it the first time. correct spelling and punctuation really does seem to everything with learning to code. thanks again.

rachid guergour
.a{fill-rule:evenodd;}techdegree
rachid guergour
Front End Web Development Techdegree Student 483 Points

This is doesn't work man

rachid guergour
seal-mask
.a{fill-rule:evenodd;}techdegree
rachid guergour
Front End Web Development Techdegree Student 483 Points
rachid guergour
.a{fill-rule:evenodd;}techdegree
rachid guergour
Front End Web Development Techdegree Student 483 Points

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

Ayman Omer
Ayman Omer
9,472 Points
Ayman Omer
Ayman Omer
9,472 Points

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