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

Rafael de Lima
seal-mask
.a{fill-rule:evenodd;}techdegree
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Points
Posted by Rafael de Lima
.a{fill-rule:evenodd;}techdegree
Rafael de Lima
Front End Web Development Techdegree Student 2,051 Points

list 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.

style.css 
/* Complete the challenge by writing CSS below */

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

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

3 Answers

Nikos Papapetrou
Nikos Papapetrou
5,496 Points
Nikos Papapetrou
Nikos Papapetrou
5,496 Points

You have selected the links and not the list. example:

nav li {
     display: inline-block;
}
Brad Meraly
Brad Meraly
6,912 Points
Brad Meraly
Brad Meraly
6,912 Points

Also 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.