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

Glenn Robinson
Glenn Robinson
4,581 Points
Posted by Glenn Robinson
Glenn Robinson
4,581 Points

my answer .main-nav, li{ display: inline-block;} ~(make sure you're selecting a list item in main.nav) is my error msg.

question: display list items side by side with a block element that flows with surrounding elements ~ error

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

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

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 21,229 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 21,229 Points

Hi Glenn,

You are super close. You don't need the "," in between ".main-nav" and "li".

If you use a comma in between it would select the "main-nav" class and the "li" elements. When you remove the comma it means that you are selecting the "li's" within the "main-nav" like this:

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

``

Happy Coding!