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

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

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
.logo {
  width: 110px;
  margin: auto;
.main-nav, li{
  display: inline-block;
<!DOCTYPE html>
    <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">
    <div class="container">
            <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>

1 Answer

Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 21,261 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!