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

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

style.css
header {
  text-align: center;
}
.logo {
  display: block;
  width: 110px;
  margin: auto;
}
.main-nav li, .main-nav {
  display: block;
}
index.html
<!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

Isaiah Duncan
Isaiah Duncan
3,240 Points

I'm not sure what you're pointing at with the title of this thread, but the challenge just wants you to put the items in the navbar side-by-side instead of stacked on top of one another. You can achieve this using the following code:

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