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 Kim Dallas
Kim Dallas
11,461 Points

inline alone should work

inline alone should work it's not

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

header {
  text-align: center;
}

.logo {
  width: 110px;
  margin: auto;
}
.main-nav li {
  display:inline;
}
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>

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Apologies. I assumed you were on Task one.

Task two isn't worded that clearly. It did take a few reads to get what it is asking, but you'll still use inline-block. The hint in the instructions lie in this line:

Let's set .main-nav to be as wide as the content inside it.

The content inside are the list items which are set to inline-block, so we need to set it to be the same. Here you can just add the class to the same rule, thus setting both the same:

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

:dizzy:

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hi Kim,

inline could work, but the instructions ask to generate "a block element" that "flows with surrounding content." Essentially, you then need an element that can take dimensions (block), but that does react to other elements (inline). So, what is needed is, in fact, inline-block.

Keep Coding! :)
:dizzy:

Kim Dallas
Kim Dallas
11,461 Points

hi Jason. yes that's the first challenge. the 2nd says to change it to the display that doesn't take up the whole line. it should accept inline but it won't. inline-block works for the 1st but not the second