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

Kamarky Jimenez
Kamarky Jimenez
3,754 Points

i followed all the hints for the first question but it still doesnt work.

this is the code i used

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

/* Complete the challenge by writing CSS below */

header {
  text-align: center;

.logo {
  width: 110px;
  margin: auto;

  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

daniel benisti
daniel benisti
Front End Web Development Techdegree Student 14,146 Points

You are almost there!! that one was a little tricky. the elements which you want to be displayed in in-line mode are the <li> element and not the <ul> element. so the correct answer will be:

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

display flex will work as well and even work better in a responsive layout :)