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

Dan Warren
Dan Warren
9,125 Points
Posted by Dan Warren
Dan Warren
9,125 Points

This page has a bug.

I try to complete 1st step of this task but end up getting stuck on loading screen and can't move on. How do I fix this?

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

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}
.main-nav {
  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>

1 Answer

Bert Witzel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,917 Points
Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,917 Points

Hi Dan, you are very close. I did the first task in the challenge you listed and you have to make sure to target the list items in the main-nav. Your code should look like this:

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