
Dongmi Heo
6,745 PointsThe 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;
}
.logo{
width: 110px;
margin: auto;
}
.logo,
.main-nav,
.main-nav li{
display :block;
}
<!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

Martin Sole
80,277 PointsHi 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
6,745 PointsDongmi Heo
6,745 PointsI 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.