
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Pointslist 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>
<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>
3 Answers

Nikos Papapetrou
5,551 PointsYou have selected the links and not the list. example:
nav li {
display: inline-block;
}

Rafael de Lima
Front End Web Development Techdegree Student 2,051 PointsThank you guys!
It was actually .main-nav li

Brad Meraly
7,230 PointsAlso 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.