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!

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

Rafael de Lima
seal-mask
.a{fill-rule:evenodd;}techdegree
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Points
Posted by Rafael de Lima
.a{fill-rule:evenodd;}techdegree
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Points

list items side by side from .main-nav

Trying to select the li item on .main-nav. Preview looks good but can't seem to get it as they wish.

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

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

.main-nav a {
  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

Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Nikos Papapetrou
Nikos Papapetrou
6,305 Points

You have selected the links and not the list. example:

nav li {
     display: inline-block;
}
Brad Meraly
Brad Meraly
7,242 Points
Brad Meraly
Brad Meraly
7,242 Points

Also remember to make the anchor tags display:block so they are take up the entire space of the list item. That’s to help with clicking on the nav or touching on a mobile device.