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
Front End Web Development Techdegree Graduate 18,282 Points
Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Front End Web Development Techdegree Graduate 18,282 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;
}