CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Dan Warren
Dan Warren
9,121 Points
Posted by Dan Warren
Dan Warren
9,121 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
Bert Witzel
Front End Web Development Techdegree Student 8,759 Points
Bert Witzel
.a{fill-rule:evenodd;}techdegree
Bert Witzel
Front End Web Development Techdegree Student 8,759 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;
}