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

Hello, in need of help with this question, not accepting my code.

The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it. Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

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

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

4 Answers

North Krimsly
North Krimsly
2,707 Points

You're very close. You have to set the <ul> itself to use inline-block. The container itself has to have inline-block display, not the <li> elements within it.

Ty North Krimsly

David Oliveira
David Oliveira
7,690 Points

I'm facing the same challenge here. I've set it the following without success:

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

ul{
  display: inline-block;
}

.main-nav li{
  display:inline;
}

Not sure what i'm missing here. Any help would be appreciated.

North Krimsly
North Krimsly
2,707 Points

Hi David, I can't test your code at the moment but I suggest you take a look at your .main-nav display and width settings, and compare that with the settings in Raedawn's code above. I think you may need to change the display and width settings. If that works, I invite you to ask why did it work :) Hint: display:inline-block is different from display:inline and also different from display:block. And, width:auto is different from not specifying a width at all.

David Oliveira
David Oliveira
7,690 Points

I've figure it out. I should have set both elements with the same style display: inline-block;

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

Thanks North Krimsly