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

Rafael de Lima
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Points

list items side by side from .main-nav

Trying to select the li item on .main-nav. Preview looks good but can't seem to get it as they wish.

/* Complete the challenge by writing CSS below */

header {
  text-align: center;
.logo {
  width: 110px;
  margin: auto;

.main-nav a {
  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>

3 Answers

Nikos Papapetrou
Nikos Papapetrou
5,551 Points

You have selected the links and not the list. example:

nav li {
     display: inline-block;
Brad Meraly
Brad Meraly
7,230 Points

Also remember to make the anchor tags display:block so they are take up the entire space of the list item. That’s to help with clicking on the nav or touching on a mobile device.