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

Dongmi Heo
Dongmi Heo
6,745 Points

The logo is an <img>, so it displays inline with surrounding content by default. The logo displays on the same line as .

I've tried many ways to solve that, but I can't find how I can approach to the answerㅠㅠ

/* Complete the challenge by writing CSS below */

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

.main-nav li{
  display :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

Martin Sole
Martin Sole
80,277 Points

Hi You're close to the correct answer. You need to add the display block to the .logo selector. main-nav and main-nav li need to remain as display: inline-block.

Dongmi Heo
Dongmi Heo
6,745 Points

I already tried adding display:block; to the .logo selector(also inline-block and inline too!), but it said that I'm not using the correct display value.