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

Jacquelyn Springs
Jacquelyn Springs
6,022 Points

.main-nav to display a full line

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

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}
.main-nav li {
 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>

1 Answer

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 21,261 Points

Hi Jacquelyn,

I think you are stuck on this part of the challenge:

Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

So you need an additional selector that will just target .main-nav, no the <li>'s inside of it. But again you will use "display: inline-block" so it is a block element, but displays inline and doesn't take up the whole width of the line.

Here is my code for you to reference:

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

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

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

Happy Coding!